[w3c/editing] Speccing placeholders (Issue #503)

michael created an issue (w3c/editing#503)

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.

<img width="1443" height="1207" alt="Image" src="https://github.com/user-attachments/assets/c85a1d77-0047-4f75-9d08-6cd507fdaa0c" />

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:

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

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

```html
<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.

-- 
Reply to this email directly or view it on GitHub:
https://github.com/w3c/editing/issues/503
You are receiving this because you are subscribed to this thread.

Message ID: <w3c/editing/issues/503@github.com>