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