contenteditable不是“加了就能编辑”的开关，必须配tabindex="0"才能键盘聚焦，spellcheck="false"需显式声明防拼写干扰；hidden只认存在性，id重复导致getElementById仅返回首个。
contenteditable 不是“加了就能编辑”的开关，tabindex="0" 缺失会导致键盘无法聚焦，spellcheck="false" 不加则拼写红线干扰 UI；hidden 写成 hidden="false" 无效，它只认存在与否；id 重复不报错但 document.getElementById() 只返回第一个——这些不是边缘情况，而是日常必踩的坑。
哪些属性真能用在任意 HTML 元素上
截至 2026 年 9 月，MDN 明确认定的全局属性共 27 个，包括：accesskey、autocapitalize、autocorrect、autofocus、class、contenteditable、dir、draggable、enterkeyhint、exportparts、hidden、id、inert、inputmode、is、itemid、itemprop、itemref、itemscope、itemtype、lang、nonce、part、popover、slot、spellcheck、tabindex、title、translate、virtualkeyboardpolicy。
style 和 data-* 虽然能写在任何标签上，但它们不在规范定义的“全局属性”名单里：style 是所有元素都支持的标准属性，data-* 是约定俗成的数据载体机制；误把它们当全局属性，容易在可访问性审计或语义验证时被标记为不严谨。
contenteditable 必须配 tabindex="0" 才能键盘操作
设了 contenteditable="true" 却点不进去、按 Tab 跳不过去？大概率漏了 tabindex="0"。这个组合不是可选优化，而是 WCAG 2.1 合规底线。
立即学习“前端免费学习笔记（深入）”；
-
tabindex="-1"：允许 JS 主动调用.focus()，但不进自然 tab 流，用户无法键盘抵达 -
tabindex="0"：按 DOM 顺序加入焦点流，最安全通用 -
tabindex="5"或其他正数：强制前置顺序，会打乱屏幕阅读器阅读流，不推荐 -
contenteditable="plaintext-only"是无效值，浏览器全部忽略；合法值只有true、false和空字符串（等价于true）
建议写法：
<div contenteditable="true" tabindex="0" spellcheck="false">可编辑文本</div>
hidden 和 id 的“假简单”陷阱
hidden 是布尔属性，只检测是否“存在”，不看值：hidden="false"、hidden="0"、hidden="anything" 全部等效于 hidden —— 元素照样隐藏。要控制显隐逻辑，应该用 JS 切换属性存在性，而不是赋值。
id 看似简单，但重复 ID 不触发控制台报错，只会让 document.getElementById("xxx") 始终返回第一个匹配元素；CSS 中 #xxx 选择器也只命中首个；ARIA 属性如 aria-labelledby="xxx" 会引用错误目标；SEO 工具可能误判文档结构。
检查方式：
document.querySelectorAll('[id]').forEach(el => { /* 统计 id 出现次数 */ })
移动端友好但兼容性差的新属性
enterkeyhint、inputmode、virtualkeyboardpolicy 这类属性对移动输入体验提升明显，但落地前必须查兼容性：
-
enterkeyhint="search"在 iOS Safari 上显示搜索图标，但 Android Chrome 需 v115+ 才稳定支持 -
inputmode="decimal"在部分低端 Android 设备上被忽略，退化为text -
virtualkeyboardpolicy="manual"目前仅 Chromium 124+ 和 Firefox 127+ 支持，Safari 完全不识别
用之前先做特性检测：
if ('virtualKeyboard' in navigator) { /* 启用 manual 策略 */ }，否则 fallback 到传统 focus/blur 控制。
真正难的不是记住 27 个名字，而是理解每个属性在 DOM 行为、可访问性语义、浏览器实现差异上的真实边界——比如 inert 在旧版 Chrome 里根本没效果，popover 的触发逻辑和 dialog 不同，这些细节一旦忽略，上线后就是难以复现的交互断裂。
