contenteditable需配合tabindex才能聚焦，合法值仅true/false/空字符串，CSS的user-select、pointer-events等会破坏编辑行为，spellcheck等属性需显式声明。
contenteditable 是唯一能直接让任意 HTML 元素变成可编辑区域的全局属性，但它不是“开个开关就完事”——漏掉 tabindex、写错值、被子元素样式拦截，都会导致光标进不去、选不了、读屏器报错。
为什么 contenteditable="true" 后还是无法聚焦？
浏览器不会自动把普通 <div> 变成可聚焦元素，即使加了 <code>contenteditable。它只控制“内容是否可编辑”，不负责“能否获得焦点”。
- 必须显式添加
tabindex="0"，否则键盘 Tab 无法进入，el.focus()也无效 -
tabindex="-1"允许 JS 聚焦（el.focus()），但不参与自然 tab 流，适合弹窗内手动触发场景 - 设为正数（如
tabindex="5"）会打乱屏幕阅读器顺序，WCAG 不推荐 - 若父容器有
inert或hidden，子元素即使有contenteditable也会被忽略
contenteditable 的合法值只有三个
它不接受自由字符串，浏览器只识别 true、false 和空字符串（""），其余值（如 "plaintext-only"、"on"）会被当作 false 处理或直接忽略。
-
contenteditable="true"：启用编辑，支持富文本（含格式、嵌套标签） -
contenteditable="false"：禁用编辑，但子元素若设为true仍可编辑 -
contenteditable=""（空字符串）：等价于true，是规范推荐写法之一 - 不要写
contenteditable="1"或contenteditable="yes"—— 没效果，还误导协作者
哪些样式会悄悄破坏 contenteditable 行为？
即使 HTML 属性全对，CSS 也可能让光标消失、文字无法选中、点击无响应。
立即学习“前端免费学习笔记（深入）”；
Wechat Article Html
下载
将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。
-
user-select: none：阻止文本选择 → 光标不出现，复制失效 -
pointer-events: none：整个元素不响应鼠标 → 点击穿透，无法聚焦 -
overflow: hidden+ 内容溢出：光标可能被裁切，尤其在resize: both场景下 - 未重置默认
outline：聚焦时无视觉反馈，对键盘用户极不友好
建议初始化时加一行：outline: 2px solid #007aff;（或用 :focus-visible 更精准）。
spellcheck 和 autocorrect 不是摆设
它们直接影响编辑体验，尤其在移动端和多语言输入场景：
-
spellcheck="false"关闭拼写检查下划线（避免干扰 UI，比如代码编辑区） -
autocorrect="off"禁用 iOS 自动纠错，防止用户输入 “js” 被改成 “is” -
autocapitalize="none"阻止首字母大写，适合密码、token、命令行输入 - 这些属性在
<input>上行为一致，但在contenteditable区域中需显式声明才生效
真正容易被忽略的是：这些属性一旦设为 false 或 off，就不会继承父级值 —— 必须在可编辑容器上直接写。
