加了contenteditable="true"仍点不动，主因是元素无法获焦：需加tabindex="0"、排除父级contenteditable="false"（就近false优先）、禁用CSS如user-select:none或pointer-events:none。
contenteditable 不是“加了就能用”，它默认不聚焦、不提示、不守规矩——直接写 <div contenteditable="true"> 很可能点不动、回车崩结构、粘贴带 XSS 风险。
为什么加了 contenteditable="true" 还点不动
最常见原因不是代码写错，而是元素根本拿不到焦点：
- 原生
<div>、<p>没有 tab 焦点能力，必须显式加tabindex="0" - 父级若设了
contenteditable="false"，子元素再设"true"也无效（就近 false 优先） - CSS 禁用了交互：
user-select: none、pointer-events: none或display: contents都会让编辑失效 - 别给
<input>或<textarea>加这个属性——既无意义，又可能干扰原生行为
怎么安全取值：用 textContent 还是 innerHTML？
取决于你要什么内容，二者不能混用：
- 只要纯文本（比如存摘要、做校验、发给后端当 plain text）→ 用
el.textContent，不执行脚本、不渲染标签、天然防 XSS - 需要保留简单格式（如换行、
<strong>、<ul>）→ 用el.innerHTML，但必须清洗：删掉所有style、class、未知标签和<script>变体 - 绝对别用正则替换 HTML 字符串，例如
innerHTML.replace(/<script.*?>/gi, '')容易漏掉闭合变体，导致 XSS - 粘贴时可直接走
event.clipboardData.getData('text/plain')，跳过 HTML 解析，更轻量也更安全
表格单元格里用 contenteditable 的真实代价
直接写 <td contenteditable="true"> 是最省事的写法，但也是埋雷最快的写法：
立即学习“前端免费学习笔记（深入）”；
- 回车会插入
<div>或<p>，直接破坏表格结构 - 移动端光标定位不准，软键盘唤起后常卡在顶部或消失
- 没有原生表单能力：无法设
type="number"、maxlength、required，也无法触发checkValidity() - 所谓“点击编辑”其实是伪需求——
contenteditable="true"让单元格始终可编辑，不符合“点击才激活”的交互预期 - 真要稳定，推荐“点击时用
<input>覆盖<td>”方案：支持原生校验、键盘行为可控、样式隔离干净
复杂点不在属性本身，而在浏览器对它的自由发挥——它不保证换行方式、不统一粘贴逻辑、不约束光标行为。你得自己补全焦点控制、内容清洗、输入法兼容和 DOM 同步，否则上线后第一波用户反馈就是“回车崩了”“中文输一半没了”“粘贴完全是乱码”。
