按回车键生成标签需监听keydown事件，判断event.key==='Enter'并调用preventDefault()；再取input.value.trim()校验非空、去重、限长；最后创建标签元素插入页面并清空输入框。
在输入框中按回车键生成标签（Tag），核心是监听 keydown 事件，捕获 Enter 键（keyCode === 13 或更推荐用 event.key === 'Enter'），然后提取输入内容、创建标签元素、插入到页面，并清空输入框。
监听回车并阻止默认行为
给输入框绑定 keydown 事件，在回调中判断是否按下 Enter 键。必须调用 event.preventDefault() 防止表单提交或换行（尤其在 <textarea></textarea> 中）：
- 使用
input.addEventListener('keydown', handler) - 检查
event.key === 'Enter'（现代写法，比 keyCode 更可靠） - 立即执行
event.preventDefault()，避免意外提交或焦点跳转
提取并校验输入内容
回车触发后，从输入框获取值，做基础清理和校验：
- 用
input.value.trim()去除首尾空格 - 过滤空字符串、纯空白符、重复标签（可选：维护一个 Set 记录已存在标签文本）
- 可限制长度（如
value.length > 0 && value.length ）
动态创建并插入标签元素
生成标签通常用 <span></span> 或 <button></button>（带删除功能），添加类名便于样式控制：
立即学习“Java免费学习笔记（深入）”；
- 用
document.createElement('span')创建标签节点 - 设置
textContent或innerText为用户输入内容 - 添加 class（如
tag）并可附加data-value属性用于后续操作 - 用
container.appendChild(tag)插入到指定容器（如<div class="tag-list">） <h3>清空输入框并保持焦点（可选优化）</h3> <p>生成成功后重置输入框状态，提升交互体验：</p> <ul> <li>执行 <code>input.value = ''清空内容 - 调用
input.focus()让光标保留在输入框内，支持连续输入 - 如需防重复提交，可在生成过程中临时禁用输入框，完成后恢复
不复杂但容易忽略细节：比如未阻止默认行为导致页面刷新，或没 trim 导致空格标签，或忘记清空后仍能重复回车。把这四步串起来，就能稳定实现「回车生标签」功能。
