contenteditable属性如何实现HTML元素的编辑功能及其具体应用技巧？

本文共计1075个文字，预计阅读时间需要5分钟。

contenteditable 的作用不是让元素看起来像输入框，而是让浏览器原生接管该元素的编辑行为——包括光标、选中、输入、删除、粘贴、回车换行等全部由渲染引擎处理，无需自行实现文本光标或进行 DOM 操作逻辑。

contenteditable="true" 必须写字符串，不能简写为 contenteditable

常见错误是写成 <div contenteditable> 或 <div contenteditable="">。这在 Chrome 中可能被当作 "true"，但在 Firefox 或 Safari 中行为不一致，甚至被忽略。必须显式写成：

<div contenteditable="true">可编辑</div>

其他合法值只有 "false" 和实验性 "plaintext-only"（Safari 支持差，不建议依赖）。