直接给加contenteditable="true"不可行，会导致tab跳转异常、enter换行而非提交、粘贴污染、移动端失效、ie/safari兼容差等问题；正确方案是双击时动态插入并统一处理enter/escape/blur事件。

直接给 <td> 加 <code>contenteditable="true" 会出什么问题

别这么干。它看起来最省事，但实际会立刻触发一堆不可控行为：Tab 键跳不过去、Enter 默认换行而非提交、粘贴 Word 内容带样式甚至 <script></script> 标签、textContent 取出来混着 <br> 和不可见字符、移动端长按无响应、IE11/Safari 表现不一致——这些不是边缘 case，是开箱即用就发生的事实。

根本原因是：contenteditable 是富文本编辑引擎开关，不是“单元格输入框”。表格语义和编辑行为天然冲突，浏览器没为 <td> 做过专门适配。 <ul> <li>必须显式加 <code>tabindex="0" 才能键盘聚焦，否则 document.execCommand 失效

user-select: none 或 pointer-events: none 会让点击完全失效

没有 Enter/Escape 统一收口逻辑，用户极易卡在编辑态或丢数据

用 <input> 动态替换 <td> 的实操要点 <p>这是目前兼容性最好、控制力最强的做法：保留静态 DOM 结构，只在双击时插入表单控件，并严格对齐尺寸。</p> <ul> <li>监听 <code>dblclick（不是 click），避免和行选中、排序等交互冲突

进入编辑前存原始值：cell.dataset.originalValue = cell.textContent

清空 cell.innerHTML，插入 <input type="text">，设置 style="width:100%; height:100%; margin:0; padding:4px; border:1px solid #999;"

立即调用 input.focus()，并移除 td 的 padding，防止溢出

移动端需额外支持长按（touchstart + setTimeout）或显式「编辑」按钮

Enter、Escape、blur 三个事件为什么必须统一处理

这不是可选项，是编辑闭环的底线。缺一不可，否则用户一定会丢数据或卡住。

使用HTML,CSS,JavaScript开发Android应用程序 英文文字pdf版附源文件

如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Andr​​oid友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Andr​​oid应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更

下载

• Enter：必须 event.preventDefault() 拦掉默认换行，校验后更新内存数据源（不是只改 DOM），再还原 <td> 显示 <li> <code>Escape：恢复 dataset.originalValue，移除 <input>，不碰数据源，且重新聚焦到原 <td> <li> <code>blur：作为兜底，但不能替代 Enter/Escape —— 比如用户点了别的 input，blur 触发，但此时应视为“确认提交”还是“取消”？必须由业务逻辑明确判定

所有操作都要同步更新二维数组或状态对象，否则排序、筛选、导出时数据必然错乱。

为什么建议放弃 contenteditable 用于表格单元格

它在 <div> 或 <code><p></p> 里能 work，但在 <td> 里本质是“带缺陷的权宜之计”。Safari 中 Enter 插入 <code><div> 而非换行符；IE11 下撑高行高；所有浏览器都难以拦截粘贴污染；无法做字段级校验（比如数字列拦不住字母）；无障碍支持差，屏幕阅读器无法识别编辑状态。 <p>真正要落地，就得接受：表格单元格编辑不是“让 td 可编辑”，而是“在 td 里临时塞一个 input，并管好它的生命周期”。这个认知偏差，是绝大多数人踩坑的起点。</p> </div>