必须为 显式添加 tabindex="0" 才能使其进入 tab 链并支持键盘焦点、快捷键和 js 聚焦；父级 contenteditable="false" 或 user-select: none/pointer-events: none 会阻断编辑；需拦截 enter、paste、backspace 等行为并清洗 html 内容以确保安全可控。

为什么直接给 <td> 加 <code>contenteditable="true" 会点不动

表格单元格默认不可聚焦，contenteditable="true" 不会自动赋予键盘焦点能力。鼠标点一下能输，但 Tab 切换、快捷键（Ctrl+B）、JS 调用 focus() 全都失效——因为没进 Tab 链。

必须显式加 tabindex="0"，且不能被父级或 CSS 拦截：

• tabindex="-1" 只支持 JS .focus()，不支持键盘导航
• 父容器（如 <table> 或 <code><tr>）设了 <code>contenteditable="false"，子 <td> 的 <code>"true" 就被忽略（“就近 false 优先”）
• CSS 中写了 user-select: none 或 pointer-events: none，点击直接静默失败

如何让 <td> 编辑时行为可控 <p>浏览器对表格单元格的编辑行为几乎不标准化：回车可能跳到下一格、也可能在当前格内换行；粘贴 Word 表格会嵌套出 <code><div><table><tr><td> 多层结构；Backspace 在 Chrome 和 Firefox 中删除逻辑完全不同。 <p>关键动作要主动拦截：</p> <ul> <li>监听 <code>keydown，对 Enter 调用 event.preventDefault()，避免意外跳格；如需换行，手动插入 \n 或 <br>

监听 paste，用 event.clipboardData.getData('text/plain') 提纯文本，跳过 HTML 解析

禁用原生格式粘贴：不要依赖 execCommand('insertText')（已废弃），改用 document.getSelection().getRangeAt(0).insertNode(...)

移动端 iOS Safari 对 <td> 支持极弱，必须确保 <code>min-width、min-height 不为 0，且无 transform 或 overflow: hidden 干扰光标定位

怎么安全获取和提交表格内容

innerHTML 在 <td> 上返回的是高度不可控的字符串：Chrome 插 <code><div>，Firefox 插 <code><p></p><div class="aritcle_card flexRow artxards"> <div class="artcardd flexRow"> <a class="aritcle_card_img" rel="nofollow" href="/xiazai/skill5806" title="html-deploy"><img src="https://img.php.cn/upload/skill/000/000/081/179066538882434.jpg" alt="html-deploy" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a> <div class="aritcle_card_info flexColumn"> <a rel="nofollow" href="/xiazai/skill5806" title="html-deploy" class="overflowclass">html-deploy</a> <p class="overflowclass">使用 htmlcode.fun 将 HTML 内容或文件部署到网页，适用于用户要求“部署到网页”“托管此 HTML”“生成此前端...的实时链接”等场景。</p> </div> <a rel="nofollow" href="/xiazai/skill5806" title="html-deploy" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a> </div> </div>，Safari 可能塞空标签，复制粘贴还带 style 和 data-* 属性。

推荐分场景处理：

• 纯文本字段：td.textContent —— 安全、无 XSS、语义清晰
• 需保留简单格式（如换行）：td.innerHTML.replace(/]+>/g, '').replace(/\s+/g, ' ').trim()（仅作示意，正则无法替代 DOM 清洗）
• 真正需要 HTML 格式：new DOMParser().parseFromString(td.innerHTML, 'text/html') 后白名单遍历，只保留 <br>、<strong></strong>、<em></em> 等，删掉所有 onerror、style、class
• 提交前务必校验：td.innerHTML 里出现 <script></script>、<img onerror="</code">、<code>javascript: 等，应直接拒绝或清洗

为什么不能把 contenteditable 加在 <table> 或 <code><tr> 上 <p>整表或整行设 <code>contenteditable="true" 是典型反模式：它会让整个表格变成一个巨型可编辑区域，用户一按 Backspace 可能删掉整行，光标在嵌套 <td> 间跳转异常，选中文字时连边框都一起高亮，且无法单独控制每个单元格的行为边界。 <p>正确做法是粒度锁死：</p> <ul><li>只对 <code><td> 和 <code><th> 设置 <code>contenteditable="true"，其他标签一律 false 或不设

用 CSS 显式禁用非编辑区域：table, tr { contenteditable: false; }

避免用 <span></span> 包裹 <td> 再设 <code>contenteditable —— 会破坏表格语义，导致屏幕阅读器误读

表格编辑的复杂点不在“能不能输”，而在“输完怎么收、怎么验、怎么防崩”。浏览器没义务帮你维护结构，所有边界都要手动守。