Speccing placeholders

[michael]

Over the years I've spent an enormous amount of time related to issues with rendering placeholders inside a contenteditable. There are lots of solutions that work in one situation but not in others. I've been searching and finding a solution, but at the price of many workarounds.

I was wondering, if it would make sense to spec a best-practice solution for in-flow placeholders that don't break editing, and ensure that all browsers support it, without requiring workarounds.

Here's example of different placeholders in https://svedit.dev.

I have the following requirements:

• should work with any markup/styling and must be rendered in flow (position: absolute hacks are not solving the general issue)
• support multi-line placeholders
• should work with centered text (cursor is rendered centered too, i.e. the cursor is where the first character would appear when typing)
• The empty field should remain keyboard addressable despite the placeholder

My current solution works like this:

.editable [placeholder].empty::before {
	color: #ccc;
	content: attr(placeholder);
}

.editable [placeholder].empty.focused br {
	display:none;
}

<div class="editable" contenteditable="true">
  <h3 class="field empty" placeholder="Heading 3"><br></h3>
  <h3 class="field empty focused" placeholder="Heading 3"></h3>
  <h3 class="field empty" placeholder="Heading 3"><br></h3>
  <h3 class="field empty" placeholder="Heading 3"><br></h3>
</div>

Notice, that I dynamically add a focused class, once a field gets selected and the br is removed. The reason is that placeholder rendering doesn't work reliably when there's a br tag inside. E.g. the cursor gets rendered at the wrong position (e.g. after the placeholder in Chrome). The br is needed to make the element addressable with cursor-keys. However the br is not needed if you have a placeholder (except in Firefox).

See: #498, #499, #500, #501, #502

Would be amazing if the issues could be fixed, and I could document a recommended way of how to use placeholders in contenteditable.

I will follow up with a first proposal soon.