HTML 里 textarea 替代：可编辑内容的 “plaintext-only”属性
💡
原文中文，约1200字，阅读约需3分钟。
📝
内容提要
HTML 中的 contenteditable="plaintext-only" 属性允许用户输入纯文本，具有动态调整大小和样式的灵活性，适用于多种元素，优于传统的 <textarea>。
🎯
关键要点
- HTML 中的 contenteditable='plaintext-only' 属性允许用户输入纯文本。
- 该属性在所有主要浏览器中可用，并于 2025 年 3 月 4 日成为基线新功能。
- contenteditable='plaintext-only' 属性可以动态调整大小，优于传统的 <textarea>。
- 使用 CSS 自定义高亮 API 可以为任意文本范围设置样式，但在 <textarea> 中无法正常工作。
- 将 CSS 自定义高亮 API 应用于 <div> 元素并设置为 contenteditable 时，可以正常工作。
❓
延伸问答
什么是 HTML 中的 contenteditable='plaintext-only' 属性？
contenteditable='plaintext-only' 属性允许用户输入纯文本，并支持动态调整大小。
contenteditable='plaintext-only' 属性的优势是什么？
该属性优于传统的 <textarea>，可以动态调整大小，并允许样式自定义。
contenteditable='plaintext-only' 属性在哪些浏览器中可用？
该属性在所有主要浏览器中可用，并将于 2025 年 3 月 4 日成为基线新功能。
如何使用 CSS 自定义高亮 API 与 contenteditable 结合？
可以将 CSS 自定义高亮 API 应用于 <div> 元素并设置为 contenteditable，以正常工作。
为什么 <textarea> 无法使用 CSS 自定义高亮 API？
<textarea> 内部使用的是一个 <div>，因此无法正常应用 CSS 自定义高亮 API。
contenteditable='plaintext-only' 属性适合哪些场景？
适合需要用户输入纯文本且希望动态调整大小的场景。
➡️
