HTML 里 textarea 替代：可编辑内容的 “plaintext-only”属性

html| 2025-03-21

该HTML 特性现已在所有三个主要浏览器引擎中提供，并于 2025 年 3 月 4 日成为基线新功能。

当您想让用户输入纯文本信息时，您的第一反应可能是使用<textarea>。这在很多情况下都行得通，而且不需要特别努力就能使其与表单配合使用，但也有局限性。

其中一个例子是随着内容动态增加<textarea>，而无需使用黑客手段。还有field-sizing: content，但浏览器对它的支持有限。这就是 contenteditable="plaintext-only" 属性值组合的用武之地。你可以将其添加到通用元素（如 <div>）中，让元素自动调整大小。

另一个限制是样式。CSS 自定义高亮 API 提供了一种机制，通过使用 JavaScript 创建文本范围并使用 CSS 为其设置样式，从而为文档中的任意文本范围设置样式。在用户代理阴影根中，一个 <textarea> 内部使用的是一个 <div>，这就是为什么使用 CSS 自定义高亮显示 API 来设置文本样式无法正常工作的原因。如果直接将 CSS 自定义高亮 API 用于像 <div>这样的元素，并将其设置为contenteditable，那么 CSS 自定义高亮 API 就能正常工作。

<style>
  ::highlight(highlight) {
    background-color: yellow;
    color: black;
  }
</style>

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

<script>
  const parentNode = document.querySelector('div').firstChild;
  const range = new Range();
  range.setStart(parentNode, 0);
  range.setEnd(parentNode, 3);
  const highlight = new Highlight(range);
  CSS.highlights.set('highlight', highlight);
</script>