# How to: input-like placeholder behavior

**URL:** https://discuss.prosemirror.net/t/how-to-input-like-placeholder-behavior/705
**Category:** Uncategorized
**Created:** [March 23, 2017, 12:19am UTC](https://discuss.prosemirror.net/t/how-to-input-like-placeholder-behavior/705 "2017-03-23T00:19:59Z")
**Posts on this page:** 6
**Page:** 2

<div class="post-metadata">

### Author: ![amk221](https://discuss.prosemirror.net/user_avatar/discuss.prosemirror.net/amk221/32/2076_2.png) [@amk221](https://discuss.prosemirror.net/u/amk221)
#### Post date: [April 7, 2021, 11:47am UTC](https://discuss.prosemirror.net/t/how-to-input-like-placeholder-behavior/705/21 "2021-04-07T11:47:02Z")

</div>

Using the techniques described in this thread, there can be a flicker as the cursor lands in the contenteditable area, as Prosemirror determines which _side_ to put the decoration.

Watch closely (you might have to step through frame by frame) and you can see the cursor move from the end of the placeholder to the beginning.

> **[prosemirror-placeholder](https://share.getcloudapp.com/E0uYqplj)**
>
> Shared with CloudApp

…has anybody else noticed this, and is there anything we can do about it?

---

<div class="post-metadata">

### Author: ![bhl](https://discuss.prosemirror.net/user_avatar/discuss.prosemirror.net/bhl/32/4074_2.png) [@bhl](https://discuss.prosemirror.net/u/bhl)
#### Post date: [April 7, 2021, 10:07pm UTC](https://discuss.prosemirror.net/t/how-to-input-like-placeholder-behavior/705/22 "2021-04-07T22:07:43Z")

</div>

Might be fixable with css? I’m using this and don’t encounter the cursor issue when using a psuedo element:

```auto
  content: "paragraph";
  float: left;
  pointer-events: none;
  height: 0;

```

---

<div class="post-metadata">

### Author: ![amk221](https://discuss.prosemirror.net/user_avatar/discuss.prosemirror.net/amk221/32/2076_2.png) [@amk221](https://discuss.prosemirror.net/u/amk221)
#### Post date: [April 8, 2021, 8:29am UTC](https://discuss.prosemirror.net/t/how-to-input-like-placeholder-behavior/705/23 "2021-04-08T08:29:41Z")

</div>

@bhl, is that using a Decoration, or literally just a pseudo element?

---

<div class="post-metadata">

### Author: ![bhl](https://discuss.prosemirror.net/user_avatar/discuss.prosemirror.net/bhl/32/4074_2.png) [@bhl](https://discuss.prosemirror.net/u/bhl)
#### Post date: [April 8, 2021, 7:44pm UTC](https://discuss.prosemirror.net/t/how-to-input-like-placeholder-behavior/705/24 "2021-04-08T19:44:40Z")

</div>

That’s css for a pseudo-element. Node decoration adds a class to a block element like paragraph, then use `paragraph:empty-node::before` for placeholder.

---

<div class="post-metadata">

### Author: ![amk221](https://discuss.prosemirror.net/user_avatar/discuss.prosemirror.net/amk221/32/2076_2.png) [@amk221](https://discuss.prosemirror.net/u/amk221)
#### Post date: [April 14, 2021, 10:48am UTC](https://discuss.prosemirror.net/t/how-to-input-like-placeholder-behavior/705/25 "2021-04-14T10:48:43Z")

</div>

Because our doc schema is `inline*`, we had to add this logic to the placeholder plugin:

```javascript
const pos = doc.inlineContent ? 0 : 1;
return DecorationSet.create(doc, [Decoration.widget(pos, placeholderNode)]);

```

In case that helps anyone googling.

---

<div class="post-metadata">

### Author: ![amk221](https://discuss.prosemirror.net/user_avatar/discuss.prosemirror.net/amk221/32/2076_2.png) [@amk221](https://discuss.prosemirror.net/u/amk221)
#### Post date: [April 16, 2021, 12:34pm UTC](https://discuss.prosemirror.net/t/how-to-input-like-placeholder-behavior/705/26 "2021-04-16T12:34:13Z")

</div>

Here’s the full gist: [Prosemirror placeholder plugin · GitHub](https://gist.github.com/amk221/1f9657e92e003a3725aaa4cf86a07cc0)

[Previous page](https://discuss.prosemirror.net/t/how-to-input-like-placeholder-behavior/705.md?page=1)
