原生<input>无法实现标签输入，因其仅支持单值字符串，不支持多值管理、独立删除、语义化DOM渲染及无障碍交互；必须通过JavaScript手动控制输入行为、DOM更新、焦点管理与hidden input值同步。
原生 <input> 不支持标签（Tag）输入，必须用 JavaScript 手动控制输入行为、DOM 渲染和值同步。强行用 contenteditable 模拟会触发 iOS Safari 软键盘闪退、光标丢失、无障碍支持差等实际问题。
为什么不能直接用 <input type="text"> 实现标签输入
标签输入本质是「多值 + 可视化 + 独立删除」，而原生 <input> 只维护单个字符串值：
- 按
Enter/,/Space分隔后，需立即转为带删除按钮的 DOM 节点，<input>无法内嵌 HTML - 提交时后端通常要接收数组（如
["react", "vue"]），但name="tags"只能传单值，必须靠<input type="hidden">同步结构化数据 - Backspace 行为需区分：删字符 vs 删整个标签——原生 input 无此语义，必须拦截
keydown并手动判断光标位置与输入框内容是否为空 - 焦点管理复杂：添加标签后光标应留在输入框末尾；删除最后一个标签后必须自动
focus()回输入框，否则用户操作中断
keydown 事件中如何正确识别添加时机
不要只监听 Enter，用户习惯用逗号、空格甚至中文顿号分隔标签。关键是在 keydown 中判断并阻止默认行为：
- 触发条件：当前
<input>的value.trim()非空，且按键是Enter、,、Space、；（中文分号） - 必须调用
event.preventDefault()，否则会插入空格或换行，破坏输入体验 - 提取
input.value.trim()后立即清空input.value = ""，再创建标签节点 - 注意移动端软键盘的
Enter键可能显示为「搜索」「发送」，iOS Safari 下需额外监听input事件 +blur作为兜底（用户点空白处失焦时自动提交）
标签 DOM 结构与 hidden input 值怎么同步
每个标签应是独立可点击的块级元素，不依赖 contenteditable：
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
立即学习“前端免费学习笔记（深入）”；
- 推荐结构：
<span class="tag" data-value="html">html<button type="button" class="tag-remove">×</button></span> -
data-value存原始值（防 HTML 实体转义），删除时读它而非 innerText -
<input type="hidden" name="tags">的value推荐用 JSON 字符串，如["html","css"]；避免逗号分隔（标签本身含逗号就崩） - 每次增删标签后，立刻更新 hidden input：
hiddenInput.value = JSON.stringify(tagList) - 务必在
blur事件里检查输入框是否非空，若存在未提交内容，自动转为标签——这是用户最常抱怨「输完点了别处，标签没了」的根源
移动端和无障碍支持最容易被忽略的点
很多实现跑在桌面 Chrome 没问题，一上真机就卡死或读不出：
- iOS Safari 对
contenteditable+ 动态innerHTML极其敏感，软键盘频繁收起又弹出，改用纯<input>+ 外部标签容器可规避 - 每个标签需有明确语义：
<span role="tag">或<div aria-label="删除 html 标签">，删除按钮加aria-hidden="true"防重复朗读 - 屏幕阅读器需感知变化：给标签容器加
aria-live="polite"，新增/删除时自动播报 - 触摸目标太小：删除按钮至少 44×44px，用
padding扩展点击热区，别只靠字体大小撑开
真正稳定的标签输入组件，核心不在“怎么渲染”，而在“谁持有焦点”“值何时落地”“移动端是否失焦即崩溃”。把输入框当作唯一可信的数据源，所有标签只是它的只读投影——这个思路能避开 90% 的兼容性雷区。
