The contenteditable “plaintext-only” attribute worth mixture is now Baseline Newly obtainable  |  Weblog  |  internet.dev

Revealed: Mar 20, 2025

Whenever you wish to enable the consumer to enter plaintext data, your first intuition may be to succeed in for a <textarea>. This works for a lot of circumstances and requires no particular effort to make it work with varieties, but in addition has limitations.

One instance is rising the <textarea> dynamically with the content material with out resolving to hacks. There’s field-sizing: content material, but it surely has restricted browser help. That is the place the contenteditable="plaintext-only" attribute worth mixture is available in. You possibly can add it to generic parts like <div>, and have the aspect mechanically handle resizing.

One other limitation is styling. The CSS Customized Spotlight API gives a mechanism for styling arbitrary textual content ranges on a doc through the use of JavaScript to create the ranges, and CSS to fashion them. A <textarea> internally makes use of a <div> within the consumer agent shadow root, which is why styling the textual content with the CSS Customized Spotlight API would not work. If used on a component like a <div> straight that you’ve got made contenteditable, the CSS Customized Spotlight API works simply effective.

<fashion>
  ::spotlight(spotlight) {
    background-color: yellow;
    shade: black;
  }
</fashion>

<div contenteditable="plaintext-only">Edit me</div>

<script>
  const parentNode = doc.querySelector('div').firstChild;
  const vary = new Vary();
  vary.setStart(parentNode, 0);
  vary.setEnd(parentNode, 3);
  const spotlight = new Spotlight(vary);
  CSS.highlights.set('spotlight', spotlight);
</script>

This is a screenshot of the demo that exhibits this limitation. Notice how the textual content within the <textarea> is not styled, however the textual content within the two contenteditable generic <div> parts is.