HTML 里 textarea 替代：可编辑内容的 “plaintext-only”属性
该HTML 特性现已在所有三个主要浏览器引擎中提供，并于 2025 年 3 月 4 日成为基线新功能。
html |
该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>
下面的演示截图显示了这种限制。请注意，<textarea>;中的文本没有样式化，但两个contenteditable 的通用<div>元素中的文本有样式化。
你也许感兴趣的：