HTML标签/tag输入框实现方法

逻辑上需要重点关注以下几个关键点：

• 监听输入框的 keydown 事件，捕获 Enter、,、Space。一旦触发，提取当前输入内容，清空输入框，然后动态创建并插入一个新标签节点。
• 每个标签节点都需要包含一个 data-value 属性，并绑定点击删除事件。点击后，不仅要移除该 DOM 节点，还要同步更新 hidden input 的 value。
• hidden input 的 value 最好使用 JSON 字符串（例如 ["html","css"]），或者用逗号分隔，但需确保后台能正确解析。
• 务必处理 blur 事件。如果用户在输入框中输入了一半就失焦（例如点击其他地方），输入框里的内容应自动转成一个标签，否则用户会误以为输入丢失。

别再指望 autocomplete 和 list 属性了

配合 只能提供下拉建议列表，既不能限制用户输入，也不能自动把选中的选项转为标签。如果需要“既可以从预设列表里选，又能自由输入”的标签输入框，唯一的方法是自己构建一个下拉面板（用

• 将 autocomplete 设为 off 对标签输入同样没用。浏览器无法记住“多个标签”这种组合结构。
• list 属性只影响单次输入的建议，与标签的创建流程毫无关系。

不过，真正有帮助的反而是那些容易被忽略的语义化属性，例如 aria-label（如 aria-label="添加技术标签"）和 role="textbox"，这些能让屏幕阅读器更好地理解控件的用途。

生产环境就别自己造轮子了

自己手写一个标签输入框，看起来似乎只有几行逻辑，一两个小时就能搞定。但现实往往并非如此：

• 中文输入法的组合字符如何处理？
• 用户一次性粘贴一段包含换行、制表符的文本怎么办？
• 移动端软键盘的行为与桌面端完全不同，如何适配？
• 屏幕阅读器的焦点流如何保证？
• 键盘导航（Tab 和 Shift+Tab）能否正常工作？
• 国际化分隔符怎么处理？日语的顿号、法语的分号，这些是否需要支持？

这些边界情况会迅速拖垮开发节奏。因此，项目一旦需要上线，建议直接使用成熟方案：

• 轻量级方案：React 项目可用 react-tag-input，原生 JS 项目可用 Tagify（它也支持 Vue、React、Angular）。
• UI 库内置方案：Element Plus 的 配合 ，或者 Ant Design 的 ，都可以直接使用。

需要特别提醒：无论选用哪种方案，hidden input 的 name 必须与后端约定一致。如果后端期望接收一个数组，前端提交时应当用 JSON.stringify() 处理，或者让后端解析逗号分隔的字符串。

其实标签输入真正的难点从来不是“如何加上去”，而是“如何删得自然”“粘贴时不崩溃”“让读屏软件知道当前有几个标签”。在基础交互上重复造轮子，尤其是项目即将上线时，实在不是明智之举。