contenteditable="true" 不能直接绑定 vue/react 响应式数据，需手动监听 input/blur 事件更新状态；ie11 不支持，safari 存在光标错位等问题，建议降级为 input/textarea；enter/tab/esc 需显式拦截并处理；粘贴内容须清洗，避免富文本污染。
contenteditable="true" 不能直接绑定 Vue/React 响应式数据
直接给 <td> 加 <code>contenteditable="true" 后，输入内容不会自动同步到组件状态里——DOM 更新了，但 data 或 state 没变。这是最常踩的坑：以为加了属性就等于双向绑定。
必须手动监听 input 或 blur 事件来更新状态。Vue 用户别用 v-model 绑定 <td>，它不支持；React 用户也别试图在 <code>contenteditable 元素上用 value + onChange 模拟受控组件，容易光标跳、失焦。
- 推荐监听
input事件（实时）或blur（提交后），避免高频触发影响性能 - 更新状态时，注意用原生
event.target.innerText而非.textContent，后者会保留换行和多余空格 - 如果表格有大量单元格，考虑节流或仅对编辑中的单元格监听，避免事件绑定爆炸
IE 和 Safari 对 contenteditable 表格单元格的支持不一致
IE11 完全不支持 contenteditable 在 <td> 上的行为；Safari（尤其 iOS）会在编辑时意外触发页面滚动、光标错位，甚至无法触发 <code>input 事件。
这不是 bug，是规范未明确定义表格单元格作为可编辑容器的后果。真实项目中，只要目标用户含 iOS 或旧版 Windows，就得降级方案。
- 检测
document.execCommand是否可用，或用try/catch测试contenteditable是否生效 - 对 Safari/iOS，改用点击后替换为
<input>或<textarea></textarea>，编辑完成再切回<td> <li>避免在 <code><th> 上启用 <code>contenteditable，部分浏览器会拒绝聚焦回车、Tab、Esc 键行为需要显式接管
默认情况下，按
Enter会在contenteditable单元格内换行（插入<br>），而不是提交；Tab会跳到下一个可聚焦元素（可能跳出表格）；Escape不做任何事。这些键必须自己监听并阻止默认行为，否则用户体验断裂。尤其
Enter—— 多数业务场景要求它“确认当前编辑并跳到下一行同列”，而非换行。- 监听
keydown，对event.key === 'Enter'调用event.preventDefault()，然后更新数据、聚焦下一<td> <li> <code>Tab键需计算当前单元格位置，用table.rows[rowIndex].cells[nextColIndex]手动聚焦 -
Escape应还原初始值，并移除焦点（blur()），避免残留编辑态 - 提交前用正则清理：
text.replace(/[\r\n\t]+/g, ' ').replace(/\s{2,}/g, ' ').trim() - 禁用粘贴富文本：
event.preventDefault()+event.clipboardData.getData('text/plain') - 对数字/日期类列，编辑结束时强制类型转换，比如
parseFloat(text)并校验isNaN()
空格、换行、HTML 标签混入导致数据污染
contenteditable允许用户粘贴富文本，innerText看似干净，但实际可能带不可见字符（如零宽空格）、换行符、甚至<script></script>标签（若服务端未过滤）。前端不做清洗，后端收到的就是一团混乱字符串。别指望
trim()能解决所有问题。表格越复杂，
contenteditable的边界就越模糊。它适合轻量、内部工具型录入，不适合强格式、多角色协作场景。光标管理、撤销、历史记录这些，都得从零搭，不是加个属性就能跑起来的。 - 监听
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
