原生javascript实现标签输入框的核心是监听keydown捕获enter/逗号等键，trim后分割、去重、生成带data-id的span标签；删除时需同步dom与数据数组，禁用contenteditable，用隐藏input+标签容器分离逻辑。
如何用原生 JavaScript 实现标签输入框的增删逻辑
核心在于监听输入、截断分隔符（如空格/逗号/回车）、去重并渲染为可删除的 <span></span> 元素。不要依赖框架，原生 DOM 操作足够轻量且可控。
常见错误是直接把用户输入整个塞进标签列表，导致空字符串、重复标签、未 trim 的空白；还有删除时只删 DOM 却没同步更新数据数组，造成状态不一致。
- 监听
input事件做实时分词（适合空格/逗号分隔），或监听keydown捕获Enter和,键触发添加 - 每次添加前用
String.prototype.trim()清除首尾空白，再用Array.from(new Set(...))去重 - 每个标签
<span></span>上必须绑定唯一标识（如data-index或直接存引用），否则点击 × 时无法准确定位要删的是哪个 - 删除操作推荐用
Array.prototype.filter()生成新数组再重绘，避免 splice + 索引错位问题
为什么不能直接用 contenteditable 模拟标签输入
看似省事，实际会引入焦点管理混乱、光标跳转异常、剪贴板粘贴格式污染、移动端软键盘行为不可控等问题。尤其当用户粘贴带换行或多个逗号的文本时，contenteditable 的 innerText 解析极难稳定。
更稳妥的做法是保持一个隐藏的 <input type="text"> 用于输入，配合下方可见的标签容器，二者逻辑分离但状态同步。
Html To Pdf
下载
使用 Puppeteer + Chrome 将 HTML 渲染为中文 PDF，自动处理图表等待、Tab 展开、动画、测高、白边消除、防分页，适用于看板、报表、网页和交互图表转 PDF。
- 输入框始终聚焦，支持
Ctrl+V粘贴 → 触发paste事件后手动解析文本 - 粘贴内容用正则
/[,，\s]+/g分割，比split(',')更兼容中文顿号和混合空白 - 输入框在每次成功添加后自动清空，并保留 focus，避免用户反复点选
blur 事件里要不要自动提交剩余输入内容
要，但必须加防抖和非空判断。否则用户只是点到别处（比如点标签 ×），就误提交一个空标签。
- 在
input元素上监听blur，但只在input.value.trim() !== ''时才执行添加 - 避免和
Enter提交冲突：可在keydown中对Enter调用event.preventDefault()，防止表单意外提交 - 如果输入框有 placeholder，注意它不会触发
input事件，所以不能靠它判断“是否有输入”
移动端软键盘回车键行为不一致怎么办
Android 键盘常把回车显示为“搜索”或“前往”，iOS 则可能默认换行。统一处理方式是监听 keydown 并检查 event.key === 'Enter' 或 event.keyCode === 13（后者已废弃但仍有兼容需要）。
- 不要依赖
event.code，它在虚拟键盘下不可靠 - 对 iOS Safari，可额外监听
input事件 + 定时器检测末尾是否多了换行符（\n），再做清理 - 如果项目需支持微信内置浏览器，注意其对
inputmode="text"支持不佳，建议显式设置inputmode="none"并用 JS 控制键盘类型
真正麻烦的不是添加或删除动作本身，而是边界情况：连续空格、全角逗号、粘贴富文本、快速连按回车、撤销操作（Ctrl+Z）后状态恢复——这些都得在数据层做约束，而不是靠 UI 层补丁。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
