原生 input 和 textarea 无法直接实现回车/逗号分隔生成可删标签，因仅支持单字符串值、默认提交或插入字符、不暴露光标与标签边界状态；需用 JS 手动接管，隐藏 input + 动态标签容器为最简方案。
原生 <input> 和 <textarea> 都不能直接支持“输入 → 回车/逗号分隔 → 生成可删标签”这种交互。必须用 JavaScript 手动接管输入逻辑，否则你永远只能拿到一个字符串，而不是一组独立标签。
为什么 input type="text" 无法直接做标签输入
核心限制有三点：
-
<input type="text">只能存单个字符串值，没有 DOM 节点对应每个标签 - 用户按
Enter或,时，浏览器默认会提交表单或插入字符，不触发“创建标签”动作 - 删除操作（比如 Backspace 删掉最后一个标签）需要判断光标位置、标签边界、是否清空整个标签，原生控件不暴露这些状态
最简可行方案：隐藏 input + 动态标签容器
不用框架，几行 JS 就能跑通。关键结构如下：
<div class="tag-input"> <div class="tag-list" aria-live="polite"></div> <input type="text" class="tag-input-field" placeholder="输入后按 Enter 添加"> <input type="hidden" name="tags" value=""> </div>
说明与要点：
立即学习“前端免费学习笔记（深入）”；
- 用户始终在
input.tag-input-field中输入，所有键盘事件都监听它 - 监听
keydown，对Enter、,、Tab拦截默认行为（e.preventDefault()），然后提取当前值、去空格、非空则追加为标签节点 - 每个标签用
<span class="tag">xxx<button type="button" class="tag-remove">×</button></span>渲染，绑定点击删除事件 - 每次增删都同步更新
input[type="hidden"]的value，用逗号拼接（如"前端,HTML,Web Components"），确保表单提交可用
容易踩的坑：Backspace 删除逻辑和焦点管理
这是多数人卡住的地方——不是不会加标签，而是删不干净、光标乱跳、最后一个标签删完不自动聚焦回输入框。
- 监听
keydown时，只在input值为空且光标在末尾时才响应Backspace删除最后一个标签；否则让原生行为继续 - 删除标签后，必须手动调用
input.focus()，并用input.setSelectionRange(input.value.length, input.value.length)把光标放到末尾 - 不要用
contenteditable替代input，它会引入选区、光标、IME 输入等一堆不可控问题 - 移动端软键盘的 “完成” 键行为不统一，建议额外监听
blur事件，把未提交的输入内容也转成标签（避免用户点别处丢失）
真正难的不是“怎么加”，而是“怎么删得准、光标跟得上、移动端不崩”。只要把 Backspace 和焦点这两块逻辑写稳，其余都是体力活。
