原生 input 和 textarea 无法直接实现标签输入，因其不支持多值管理、独立标签渲染与删除交互；需用 javascript 手动监听键盘事件、动态创建标签节点并同步 hidden input 值。
<input type="text"> 本身不支持标签（Tag）输入，必须靠 JavaScript 手动实现或引入第三方库。浏览器原生没有 type="tag" 或类似语义化标签输入控件。
为什么不能直接用 input 或 textarea 实现标签输入
标签输入的核心行为是：用户输入文字 → 按空格/回车/逗号分隔 → 转为独立、可删除的标签块。而原生 <input type="text"> 只能维护单个字符串值；<textarea></textarea> 虽支持换行，但无法直观呈现已输入的标签、也不提供删除单个标签的 UI 入口。
- 提交时需把多个标签拼成数组或逗号分隔字符串，
name属性无法直接映射多值 - 键盘事件（如 Enter、,、Backspace）需手动监听并拦截默认行为
- 每个标签需要独立 DOM 节点（如
<span class="tag">React</span>），原生 input 无法内嵌 HTML - 焦点管理复杂：光标应在输入框末尾，但删除最后一个标签时需自动聚焦回输入框
最简可行的自定义标签输入实现（纯 HTML + JS）
不依赖框架，用一个隐藏的 <input type="hidden"> 存最终值，配合 <div contenteditable="false"> 模拟输入区 + 标签容器：
<pre class="brush:php;toolbar:false;"><div class="tag-input">
<div class="tag-list" aria-live="polite"></div>
<input type="text" class="tag-input-field" placeholder="输入标签，按 Enter 添加"><input type="hidden" name="tags" value="">
</div></pre>
<p>关键逻辑要点：</p><div class="aritcle_card flexRow artxards">
<div class="artcardd flexRow">
<a class="aritcle_card_img" rel="nofollow" href="/xiazai/skill9972" title="Wechat Article Html"><img
src="https://img.php.cn/upload/skill/001/246/273/6adaf20e695c2374.jpg" alt="Wechat Article Html" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
<div class="aritcle_card_info flexColumn">
<a rel="nofollow" href="/xiazai/skill9972" title="Wechat Article Html" class="overflowclass">Wechat Article Html</a>
<p class="overflowclass">将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。</p>
</div>
<a rel="nofollow" href="/xiazai/skill9972" title="Wechat Article Html" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span>
</a>
</div>
</div>
<ul>
<li>监听 <code>input 的 keydown：捕获 Enter、,、Space，提取当前输入内容，清空输入框，插入新标签节点
data-value 属性，并绑定点击删除事件（移除自身 + 更新 hidden input 的 value）value 推荐用 JSON 字符串（如 ["html","css"]）或逗号分隔（如 html,css），避免解析歧义blur 事件：若输入框非空，应自动转为标签，否则用户可能误以为输入丢失
autocomplete 和 list 属性对标签输入没用
<input list> 配合 <datalist></datalist> 只能提供下拉建议，不能限制或结构化输入内容。它不会阻止用户输入任意文本，也无法将选中项自动转为标签。如果你希望支持「从预设列表中选择标签」+「允许自由输入」，得自己实现下拉面板（用 <ul></ul> + position: absolute），并手动同步选中状态与标签列表。
-
autocomplete="off"对标签输入无意义——浏览器不会记住“多个标签”的组合 -
list属性只影响单次输入建议，不参与标签创建流程 - 真正有用的属性反而是
aria-label（如aria-label="添加技术标签"）和role="textbox"，用于辅助技术识别
生产环境建议直接用成熟方案
手写标签输入看似简单，但边界情况极多：中文输入法组合字符、粘贴多标签文本（含换行/制表符）、移动端软键盘行为、屏幕阅读器焦点流、键盘导航（Tab/Shift+Tab）、国际化分隔符（如日语用顿号、法语用分号）……这些都会快速拖垮开发节奏。
- 轻量级：用 react-tag-input（React）或 Tagify（原生 JS，支持 Vue/React/Angular）
- UI 库内置：Element Plus 的
<el-tag></el-tag>+<el-input></el-input>组合、Ant Design 的<select mode="tags"></select> - 关键提醒：无论选哪种，hidden input 的
name必须与后端约定一致；若后端期望数组，前端提交时别忘了用JSON.stringify()或服务端解析逗号分隔字符串
标签输入真正的难点不在“怎么加”，而在“怎么删得自然”“怎么粘贴不崩”“怎么让读屏软件知道当前有几个标签”。别在基础交互上重复造轮子，尤其当项目要上线时。
