HTML中实现标签输入框的动态添加删除标签结构与交互-html教程-PHP中文网

稳妥做法是分离input与div标签容器，输入框始终在末尾，按空格/逗号/回车时切分、去空、去重、添加并清空；标签支持键盘（delete/backspace）和鼠标双路径删除；失焦时仅trim非空才提交；兼顾无障碍与ios兼容。

html中实现标签输入框的动态添加删除标签结构与交互

用 `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 = '';
  }
});