稳妥做法是分离input与div标签容器，输入框始终在末尾，按空格/逗号/回车时切分、去空、去重、添加并清空；标签支持键盘（Delete/Backspace）和鼠标双路径删除；失焦时仅trim非空才提交；兼顾无障碍与iOS兼容。
用 input + div 模拟标签输入框，别碰 contenteditable
原生 input 不支持多行内嵌标签，强行用 contenteditable 会触发光标错位、回车行为失控、iOS 输入法兼容问题。稳妥做法是把输入框（input）和标签容器（div）分离，用 JS 控制焦点与渲染逻辑。
关键点：输入框始终在标签列表末尾；用户按空格/逗号/回车时，提取当前值、去空、校验重复、插入新标签、清空输入框并保持焦点。
- 输入框
type="text"，设autocomplete="off"防止浏览器自动补全干扰 - 标签容器用
div[role="list"]，每个标签用span[role="listitem"]，兼顾可访问性 - 监听
input的keydown，而非change—— 后者不响应快捷键提交
监听回车/空格/逗号触发添加，但要防误触
用户习惯用回车确认、空格分隔多个标签、逗号分隔中文场景。但直接监听所有按键容易误触发：比如输入中按空格（如“前端 工程师”不该拆成两个标签），或连续逗号（“a,,b”应合并为 a、b）。
解决方案是只在输入框有值且按下分隔符时才处理，并对输入值做预清洗：
立即学习“前端免费学习笔记（深入）”；
- 用正则
/[\s，,]+/g切分，兼容中英文逗号和空白符 - 对每个切片
.trim()，过滤空字符串 - 检查是否已存在（大小写敏感？是否去首尾空格？需按业务定）
- 添加后调用
inputEl.value = ""并inputEl.focus()，维持操作流
inputEl.addEventListener('keydown', (e) => {
if (e.key === 'Enter' || e.key === ' ' || e.key === ',') {
e.preventDefault();
const tags = inputEl.value.split(/[\s，,]+/).map(t => t.trim()).filter(t => t);
tags.forEach(addTag); // addTag 是去重插入函数
inputEl.value = '';
}
});
删除标签必须支持键盘和鼠标双路径
仅靠鼠标 × 图标不够：屏幕阅读器用户依赖键盘导航，Power User 希望用 Backspace 删除最后一个标签，或聚焦到某标签后按 Delete 删除它。
- 每个标签元素加
tabindex="0"，让它可聚焦 - 绑定
keydown：聚焦时按Delete或Backspace（且光标在输入框外）就删当前标签 - 鼠标点击 × 时，用
event.stopPropagation()防止触发父级 focus 输入框 - 删除后，若原标签是最后一个，自动 focus 输入框，避免操作中断
注意：不要用 aria-hidden="true" 隐藏 × 图标，而应给它 role="button" 和 aria-label="删除标签 {label}"。
输入框失焦时自动提交剩余内容，但得防空提交
用户常输完直接点页面其他地方，期望最后那段文字也转成标签。但此时若输入框只剩空格、或完全为空，直接提交会生成无效标签。
正确做法是在 blur 事件里做终审：
- 只在
inputEl.value.trim() !== ""时才尝试添加 - 不立即清空输入框，而是先添加、再清空，否则用户切换回来会丢失内容
- 加个微小延迟（
setTimeout(() => inputEl.value = '', 0)），避免 Chrome 在 blur 瞬间触发两次
更隐蔽的坑：iOS Safari 中，软键盘收起可能不触发 blur，建议额外监听 focusout 并配合 document.activeElement 判断是否真的离开了。
标签结构看似简单，但光标管理、键盘流、无障碍、移动端软键盘行为这四块，任一没对齐就会让用户卡住——尤其当输入法上屏延迟叠加 keydown 事件顺序错乱时，最稳的方式是把「输入→确认→渲染」拆成明确的三步状态，而不是依赖 DOM 自动更新。
