HTML网页标签删除与添加交互界面基础代码-html教程-PHP中文网

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

html网页标签删除与添加交互界面基础代码

用 `input` + `div` 实现标签输入框，别碰 `contenteditable`

原生 input 不支持内嵌标签，强行用 contenteditable 会引发光标错位、iOS 输入法异常、回车行为失控。稳妥做法是分离输入与渲染：一个 input 专管输入，一个 div 专管显示标签。

关键约束有三条：
• input 始终置于标签列表末尾；
• 用户按 Enter / Space / , 时才触发添加；
• 标签容器用 div[role="list"]，每个标签用 span[role="listitem"]，保障可访问性。

示例片段：

const inputEl = document.querySelector('#tag-input');
const container = document.querySelector('#tag-container');

inputEl.addEventListener('keydown', (e) => {
  if (e.key === 'Enter' || e.key === ' ' || e.key === ',') {
    e.preventDefault();
    const raw = inputEl.value;
    const tags = raw.split(/[\s,,]+/).map(t => t.trim()).filter(t => t);
    tags.forEach(tag => addTag(tag)); // addTag 需自行实现去重插入
    inputEl.value = '';
  }
});

表格行删除必须用事件委托 + `data-id`

直接给每行按钮绑定事件，增删行后要反复重绑，易内存泄漏；用 rowIndex 当标识更危险——删掉第 2 行，后续所有 rowIndex 全乱套。

正确姿势：
• 在 tbody 上监听 click；
• 用 event.target.matches('button[data-action="delete"]') 判断是否点中删除按钮；
• 从按钮的 dataset.id 拿真实 ID（来自后端或初始化时生成）；
• 删 DOM 前先同步 JS 数据数组，比如 items = items.filter(item => item.id !== id)。

务必写 type="button"——否则在 form 内点击会触发表单提交，页面刷新。这个坑在 Chrome/Firefox/Safari 上表现一致，但后果严重。

Doc To HTML

使用 MinerU 文档处理引擎将 Word 文档（.doc、.docx）转换为保留结构和格式的干净 HTML。

下载

标签删除要同时支持键盘和鼠标双路径

只放 × 图标不够：屏幕阅读器用户无法聚焦，Power User 无法用 Backspace 删除末尾标签，也无法聚焦某标签后按 Delete 精准移除。

实操要点：
• 每个标签元素加 tabindex="0"；
• 绑定 keydown：聚焦时按 Delete 或 Backspace 就删当前标签；
• 鼠标点击 × 时调用 event.stopPropagation()，防止意外触发父级 focus；
• 删除后若无剩余标签，自动 inputEl.focus()，保持操作流不中断；
• × 图标不能加 aria-hidden="true"，而应设 role="button" 和 aria-label="删除标签 {label}"。