原生html无tag输入控件，和均无法直接实现标签输入，必须用javascript手动监听enter/逗号等键、动态渲染可删标签并同步hidden input值；contenteditable存在ios闪退、光标丢失、无障碍差等问题，应避免使用。
原生 HTML 没有 tag 输入控件，<input type="text"> 和 <textarea></textarea> 都无法直接支持「输入→分隔→转为可删标签」的交互。必须用 JavaScript 手动接管键盘事件、DOM 渲染与值同步。
为什么不能用 contenteditable 做标签输入框
看似能自由插入 HTML 标签，实则埋雷密集：
-
contenteditable="true"不触发input事件，监听不到实时输入变化 - 移动端（尤其 iOS Safari）软键盘频繁闪退，焦点极易丢失
-
document.execCommand()已废弃，无法可靠控制光标位置 - Backspace 行为不可预测：可能删掉整个标签、跳过标签、或残留空节点
- 无障碍支持差——屏幕阅读器无法识别「标签文本 + 删除按钮」的语义关系
keydown 监听添加时机的正确写法
别监听 input 事件，它在中文输入法未上屏时就触发，导致误切；只在确认键按下时处理：
- 监听
Enter、,、;、Tab、Space（注意：空格需防连续输入） - 必须调用
event.preventDefault()，否则会插入空格或换行 - 取
input.value.trim()，再.filter(Boolean)去掉空项 - 添加成功后立即清空
input.value = ""，并手动input.focus() - 移动端兜底：监听
blur，若input.value.trim()非空，自动转为标签
标签 DOM 结构与 hidden input 同步要点
每个标签必须是独立、只读、可聚焦的块级元素，不依赖 contenteditable：
- 结构推荐：
<span class="tag" data-id="102">前端工程师<button type="button" class="tag-remove">×</button></span> -
data-id存真实 ID，innerText只用于显示，避免 HTML 实体污染 - 隐藏域用
<input type="hidden" name="tags">，值存 JSON 字符串：["html","css"]，不用逗号拼接（防标签含逗号） - 每次增删后立刻更新：
hiddenInput.value = JSON.stringify(tagList) - 删除逻辑要判断：仅当
input.value === ""且光标在末尾时，Backspace 才删最后一个标签
表单集成和无障碍容易被忽略的细节
多数人做完增删就以为完工，但提交失败、读屏器报错、验证不触发，往往出在这里：
- 没加
aria-live="polite"到标签容器，屏幕阅读器无法播报新增/删除 - 没给删除按钮加
aria-label="删除 前端工程师"，读屏时只读 × - 没处理
label[for]关联——自定义组件需用attachInternals()+formAssociated = true才能进form.elements - 没在
blur里补全逻辑：用户点空白处失焦，输入框非空却没转标签，这是投诉最多的问题
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
