HTML 里 textarea 替代：可编辑内容的 “plaintext-only”属性
内容提要
HTML 中的 contenteditable="plaintext-only" 属性允许用户输入纯文本，具有动态调整大小和样式的灵活性，适用于多种元素，优于传统的 <textarea>。
关键要点
-
HTML 中的 contenteditable='plaintext-only' 属性允许用户输入纯文本。
-
该属性在所有主要浏览器中可用，并于 2025 年 3 月 4 日成为基线新功能。
-
contenteditable='plaintext-only' 属性可以动态调整大小，优于传统的 <textarea>。
-
使用 CSS 自定义高亮 API 可以为任意文本范围设置样式，但在 <textarea> 中无法正常工作。
-
将 CSS 自定义高亮 API 应用于 <div> 元素并设置为 contenteditable 时，可以正常工作。
延伸解读
动态调整大小的优势
使用 contenteditable='plaintext-only' 属性的一个显著优势是其动态调整大小的能力。这意味着用户在输入内容时，元素会自动扩展，避免了传统 <textarea> 的固定高度限制，提升了用户体验，尤其是在需要输入大量文本的场景中。
样式自定义的灵活性
通过将 CSS 自定义高亮 API 应用于 contenteditable 的 <div> 元素，开发者可以为文本设置多样化的样式。这种灵活性在传统的 <textarea> 中无法实现，使得内容的展示更加丰富，适合需要视觉效果的应用场景。
浏览器支持与未来展望
contenteditable='plaintext-only' 属性已在所有主要浏览器中得到支持，并将在 2025 年成为基线新功能。这意味着开发者可以放心使用这一特性，预计未来会有更多基于此属性的创新应用出现，推动网页交互的进一步发展。
延伸问答
什么是 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' 属性适合哪些场景？
适合需要用户输入纯文本且希望动态调整大小的场景。
