HTML原生textarea不支持回车生成标签，因它仅插入换行符且无分隔逻辑；需用JS接管输入，通过隐藏input+动态渲染实现，监听Enter（排除中文输入法未完成状态）并分割、去重、渲染标签。
HTML原生的文本域（<textarea>）本身不支持“输入后按回车生成标签”的交互逻辑——它只会插入换行符，不会自动切分、转为可删标签。要实现类似邮箱收件人那样的标签输入框（输入文字 → 回车/逗号 → 变成独立标签），必须用 JavaScript 手动接管输入行为。
为什么
因为：
• <textarea> 的值始终是单个字符串，包含所有换行符和空格；
• 浏览器不会主动识别“回车”为分隔动作，也不会管理标签的增删状态；
• 中文输入法下直接监听 input 或 keydown 容易在未上屏时误触发切割，导致乱码或丢字。
核心实现思路：隐藏输入 + 动态渲染
最稳定的做法是：视觉上显示标签列表，背后用一个隐藏的 <input type="text"> 或 <textarea> 接收原始输入，再由 JS 解析分隔符并更新 DOM。
- 监听
keydown事件，捕获 Enter（或逗号、空格等），但仅在非中文输入状态下触发切分； - 用
event.isComposing === false过滤中文输入法未完成状态； - 对输入内容按规则分割（如去除首尾空格、过滤空项、去重）；
- 把结果渲染为
<span class="tag">xxx<button class="remove">×</button></span>形式； - 清空输入框，并聚焦回输入区域，保持连续输入体验。
关键代码片段示例
以下是一个轻量可用的结构逻辑（不依赖框架）：
<div id="tag-input"> <div id="tags-container"></div> <input type="text" id="tag-input-field" placeholder="输入后按回车..."> </div>
JS 部分重点处理：
立即学习“前端免费学习笔记（深入）”；
- 监听
#tag-input-field的keydown，判断event.key === 'Enter'且!event.isComposing； - 取
.value.trim()，用.split(/[,，\s]+/)切分（兼容中英文逗号和空格）； - 遍历生成标签元素，每个带删除按钮，点击时从数组中移除并重绘；
- 提交时，收集所有标签文本组成数组，赋给隐藏的
<input name="tags">再提交表单。
补充说明：别用
虽然 <textarea> 支持多行，但标签输入本质是「离散值集合」，不是「连续文本」。强行用它会导致：
- 用户无法用方向键精准定位到某个标签边缘；
- 回车既可能是切分动作，也可能是换行意图，语义冲突；
- 移动端软键盘回车键行为不统一（有时是换行，有时是搜索）。
所以专业做法一律采用「输入框 + 标签容器」组合，而非改造 <textarea>。
