应加状态锁防重复插入并延时清理blur，监听动态input的keydown处理enter/esc，保存时同步更新dom与js数据源并校验，移动端需适配软键盘导致的焦点丢失。
点击单元格进入编辑模式时如何避免整行失焦
直接给 <td> 绑定 <code>click 事件并插入 <input> 是常见做法，但容易忽略：如果用户快速连点两次，会触发两次插入，导致输入框嵌套；更关键的是，若表格用了 tabindex 或存在其他可聚焦元素，blur 事件可能被意外触发，编辑态提前退出。
稳妥做法是加一层状态锁和防重复逻辑：
- 用
data-editing="true"标记当前正在编辑的单元格，点击前先检查是否存在该属性 -
blur回调里延时 0 毫秒再清理（setTimeout(() => { ... }, 0)），避开浏览器同步焦点切换的竞态 - 编辑态下拦截
keydown的Tab键，手动聚焦下一个可编辑单元格，而不是让浏览器默认跳转到页面其他元素
回车确认与 ESC 取消的键盘事件绑定时机
不能在 <td> 上监听 <code>keydown —— 编辑态下焦点在 <input> 内，事件不会冒泡到父级 <td>（除非显式设置 <code>event.stopPropagation() 被禁用）。必须把监听器挂到动态创建的 <input> 实例上，且确保每次创建都绑定、销毁时解绑。
典型错误是复用同一个 input 元素或未清除旧监听器，导致多次编辑后回车触发多遍保存逻辑。
- 创建
<input>后立即调用input.addEventListener('keydown', handler) -
handler中用event.key === 'Enter'触发保存，event.key === 'Escape'触发取消 - 退出编辑前务必调用
input.removeEventListener('keydown', handler)，否则内存泄漏+逻辑错乱
保存时如何安全地更新 DOM 并同步数据源
用户敲回车后，不能只改 <td> 的 <code>textContent，还要同步维护 JS 中对应的数据数组（比如 rows[2].name）。漏掉这步，后续排序、筛选、导出都会读到旧值。
更隐蔽的问题是：若表格启用了虚拟滚动或分页，当前编辑的行可能不在渲染范围内，直接操作 DOM 会失败；或者使用了 innerHTML 插入含 HTML 的内容，导致 XSS 风险。
- 保存前校验
input.value.trim()，空值是否允许需按业务决定，不要无条件写入 - 用
textContent替代innerHTML渲染最终值，防注入 - 更新 JS 数据源后，触发自定义事件（如
new CustomEvent('cell-saved', { detail: { rowIdx, colKey, value } })），让外部逻辑响应变更
移动端软键盘弹起后失去焦点或滚动异常
在 iOS Safari 和部分安卓 WebView 中，<input> 获得焦点后软键盘弹出，常伴随页面缩放、视口偏移、甚至焦点自动丢失。此时用户敲回车，blur 立即触发，编辑内容没保存就退出了。
这不是代码逻辑问题，而是浏览器行为差异。没有银弹，但有可落地的缓解措施：
- 给
<input>设置autofocus并在setTimeout中调用input.focus()，绕过某些 WebView 的初始聚焦限制 - 监听
resize事件，检测window.innerHeight显著变小（如减少 150px 以上），视为软键盘弹出，此时延迟 300ms 再执行focus()确保稳定 - 避免在
<table> 外层设 <code>overflow: hidden或固定高度，否则软键盘会遮挡输入框且无法滚动到可视区真实项目里，这些细节比“怎么替换 DOM”更消耗调试时间。尤其是软键盘场景，必须真机测试，模拟器基本不可靠。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
