可使用contenteditable容器配合keydown事件拦截实现：当e.key为Backspace且光标左侧紧邻tag元素时，阻止默认行为并移除该tag；因input不支持嵌套HTML，必须用div[contenteditable]替代，同时需处理iOS兼容性及光标边界情况。
怎么用 JavaScript 实现输入后按 Backspace 删除整个 tag 而不是单个字符
默认的 <input> 或 <contenteditable> 元素在输入 tag 后，按 Backspace 会逐字删除，而不是“删掉整个 tag”。要实现「光标在 tag 右侧时按一次 Backspace 就移除该 tag」，核心是拦截 keydown 事件并判断光标位置。
关键点在于：必须能检测光标是否紧贴 tag 的右侧边界。纯 CSS 无法做到，得靠 JS 获取光标偏移（getSelection().getRangeAt(0).endOffset）或监听 input + keydown 组合判断。
- 推荐用
contenteditable容器 + 真实<span class="tag">xxx</span>元素，比伪造 input 更可控 - 不要依赖
selectionStart—— 它对contenteditable不稳定，尤其在 Chrome 中常返回0 - 监听
keydown，当e.key === 'Backspace'且光标左侧紧邻的是闭合的</span>（即上一个节点是 tag 元素），就e.preventDefault()并移除该 tag
为什么不能直接用 <input> + 多个 <span> 混排
HTML 标准规定 <input> 是替换元素（replaced element），内部无法插入其他 HTML 元素。强行把 <span class="tag"> 插进 <input> 会导致渲染失败或被浏览器自动剥离 —— 这不是 bug，是规范行为。
所以所有「带 tag 的输入框」实际都是视觉模拟：
立即学习“前端免费学习笔记（深入）”；
- 用
<div contenteditable="true">替代<input> - 用户输入时，先捕获逗号/空格/Enter，再把当前文本转成
<span class="tag">xxx</span>插入 - 原输入位置留一个空
<span><br></span>或零宽空格占位，避免光标丢失
回退（Undo）功能怎么低成本支持
浏览器原生的 document.execCommand('undo') 已废弃，且对 contenteditable 的 undo 栈不可靠（尤其插入/删除 tag 后容易乱序）。更稳的做法是自己维护操作历史。
- 每次有效变更（新增/删除 tag、编辑普通文本）前，用
cloneNode(true)快照当前容器的 innerHTML - 存入数组，限制长度（比如最多 20 步），避免内存泄漏
- 触发
Ctrl+Z时，直接恢复上一步快照，而不是尝试反向操作 - 注意：快照要排除临时光标占位符（如
<br>或），否则会还原出多余换行
移动端 iOS Safari 上 Backspace 删 tag 失效怎么办
iOS Safari 对 contenteditable 的 keydown 事件支持极弱 —— 很多时候根本不触发，或者只在聚焦瞬间触发一次。这是已知兼容性坑，不能硬扛。
替代方案是改用「长按呼出菜单 + 自定义删除按钮」或「双击 tag 高亮 + 点击 × 删除」：
- 给每个
<span class="tag">加touchstart延迟 300ms 判断是否长按，触发高亮态 - 高亮后显示浮动删除按钮（
<button class="tag-delete">×</button>），绝对定位覆盖在 tag 右上角 - 这个按钮在桌面端也可用，保持一致性；iOS 下完全绕过 Backspace 事件依赖
真正难的不是逻辑，是让删除动作在各种光标状态下都可预测：tag 后有空格、tag 紧挨着另一个 tag、光标在 tag 中间……这些边界 case 比想象中多得多，建议用真实输入流做回归测试，别只靠手动点几下。
