caret-color: transparent 在可编辑表格中常失效，因动态插入的 input 聚焦后样式未及时生效，iOS Safari 支持滞后，或父容器 user-select: none 等属性干扰；须在 focus 事件回调中动态设置，必要时加 setTimeout(0) 兜底。
可编辑表格里 caret-color: transparent 为什么经常失效
直接给 <input> 加 caret-color: transparent 在可编辑表格中大概率没反应，不是写法错，而是触发时机和作用域问题。表格里动态插入的 <input> 往往在焦点已获取后才被挂载，CSS 样式可能未及时生效；更常见的是 iOS Safari 对内联样式支持滞后，或父容器设置了 user-select: none / -webkit-user-modify: read-only 等干扰属性。
必须配合 focus 事件动态设置 caret-color
静态 CSS 不可靠，得在 input 真正获得焦点后立刻注入样式。注意不是 click 或 dblclick 时设，而是 focus 回调里设：
- 用
input.addEventListener('focus', () => { input.style.caretColor = 'transparent'; }) - 避免写成
input.focus(); input.style.caretColor = 'transparent';—— 这样同步执行时focus还没真正触发，样式无效 - 移动端（尤其 iOS）建议加
setTimeout(() => { input.style.caretColor = 'transparent'; }, 0)微任务兜底 - 如果用了 React/Vue 等框架，确保样式设置发生在真实 DOM 节点挂载且聚焦之后，别在虚拟节点上提前操作
隐藏光标但保留输入能力的兼容性要点
caret-color: transparent 只隐藏光标，不影响输入。但要注意这些坑：
- iOS 16+ 才完整支持
caret-color，旧版本需降级为input { color: transparent; text-shadow: 0 0 0 #000; }（仅视觉欺骗，实际光标仍存在） - 若同时设置了
input { outline: none; }，务必确认键盘导航用户仍能感知焦点位置，否则违反可访问性 - 不要对
<td contenteditable="true"> 直接设 <code>caret-color—— 它不生效，因为这不是表单控件，光标行为由浏览器原生控制，不可定制 - 如果表格用了
transform或scale缩放，iOS 下光标可能错位，此时需额外用input.style.transform = 'scale(1)'重置 - class 添加时机难卡准：DOM 插入、
focus()、浏览器渲染三者异步，class 可能早于 focus 或晚于光标绘制 - CSS 优先级易被表格继承样式覆盖，比如
td input的父级设置了color: #333，会间接影响光标颜色 - 某些 UI 库（如 Ant Design 表格）会复用 input 实例，导致样式残留或冲突
- 最稳的方式仍是事件驱动：focus → set style → 必要时 setTimeout 强制刷新
为什么不能只靠 CSS 类统一控制
给所有编辑态 <input> 预设一个 class 并写 .editing-input { caret-color: transparent; } 是常见误区。问题在于：
立即学习“前端免费学习笔记（深入）”；
