contenteditable 必须配合 tabindex="0" 才能实现键盘聚焦和输入，否则仅视觉可编辑；其值仅支持 true、false 或空字符串，且需搭配 spellcheck="false" 避免拼写干扰。

contenteditable 必须配 tabindex="0" 才能键盘聚焦，否则只是“看起来可编辑”，实际无法输入——这是最常被忽略的硬性组合。

为什么加了 contenteditable 还是点不进去？

它不是开关式属性，而是行为触发器：浏览器只认三个值——true、false、空字符串（等价于 true），不支持 "plaintext-only" 或 "on" 等写法。

• 光标点不进去，按 Tab 也跳不过去 → 缺 tabindex="0"
• 点了能聚焦，但输不了中文/符号 → 子元素有 user-select: none 或 pointer-events: none
• 拼写检查下划线干扰 UI → 忘加 spellcheck="false"

推荐写法：

<div contenteditable="true" tabindex="0" spellcheck="false">编辑内容</div>

tabindex 的数值不是“越大越靠前”

它直接影响焦点流语义和屏幕阅读器顺序，不是简单排序工具。

Html2md

使用 Readability + Turndown 将 HTML 页面转换为干净的、Agent 友好的 Markdown。去除导航栏、广告、页脚、Cookie 横幅、社交按钮等干扰元素。支持 URL...

下载

立即学习“前端免费学习笔记（深入）”；

• tabindex="-1"：只能用 JS 调 el.focus() 聚焦，不进自然 tab 流——适合弹窗打开后手动聚焦
• tabindex="0"：按 DOM 顺序加入 tab 流，95% 场景该用这个
• tabindex="5" 及正数：强制前置顺序，但会打乱屏幕阅读器逻辑，WCAG 不推荐

对 contenteditable 元素，tabindex 缺失 = 键盘不可达 = 直接违反 WCAG 2.1 2.1.1。

data-* 和 id 的边界在哪？

两者都用于标识，但语义和用途完全不同。

• data-* 是运行时数据容器：
  命名必须以 data- 开头，后续只能是字母、数字、连字符（如 data-user-id）
  值纯字符串，JS 中需用 dataset.userId 访问（驼峰转换）
  不参与样式、无障碍或 SEO，只服务脚本逻辑
• id 是文档级唯一锚点：
  必须全局唯一，且首字符只能是字母或下划线
  被 CSS 选择器、document.getElementById()、页面内跳转（#header）直接消费
  影响可访问性：ARIA 属性（如 aria-labelledby）常依赖它

真正容易被忽略的是：全局属性不是“写了就生效”，而是依赖组合与上下文。比如 contenteditable 单独存在毫无意义，tabindex 值为正数会破坏辅助技术体验，data- 属性名含大写字母会导致 JS 读取失败——这些细节不报错，但会让功能在真实用户场景中静默失效。