回车生成关键词标签的核心是监听input的keydown事件并判断Enter键，通过trim()校验去重后动态创建带删除功能的span标签，并清空输入框。
在输入框中按回车键生成关键词标签，核心是监听 keydown 事件，捕获 Enter 键（keyCode 13 或 event.key === 'Enter'），提取当前输入内容、去空格、非空则创建标签，并清空输入框。
基础 HTML 结构
用一个 input 输入框 + 一个容器（如 div）存放生成的标签：
<div id="tagContainer"></div>
JavaScript 监听回车并生成标签
关键点：阻止默认换行行为、校验输入、动态创建带删除功能的标签元素：
- 监听
input的keydown事件，判断event.key === 'Enter' -
event.preventDefault()防止表单提交或意外换行 - 用
trim()去首尾空格，过滤空字符串和纯空白字符 - 每个标签建议用
span包裹文字 + 内嵌删除按钮（如 ×），并绑定点击移除逻辑 - 添加后清空
input.value，并可自动聚焦回输入框提升体验
防重复与简单去重（可选增强）
如果业务需要避免重复标签：
立即学习“前端免费学习笔记（深入）”；
- 维护一个数组或 Set 记录已添加的关键词（注意大小写敏感性）
- 插入前检查是否已存在，存在则跳过并可提示“关键词已存在”
- 也可在 UI 层给重复标签加淡灰色背景或禁用样式，辅助用户识别
完整小示例（可直接运行）
以下代码含基础功能+删除支持+简单去重：
<input type="text" id="keywordInput" placeholder="输入关键词，回车添加"><div id="tagContainer"></div>
<script>
const input = document.getElementById('keywordInput');
const container = document.getElementById('tagContainer');
const addedTags = new Set();
input.addEventListener('keydown', (e) => {
if (e.key === 'Enter') {
e.preventDefault();
const value = input.value.trim();
if (!value) return;
if (addedTags.has(value)) {
alert('关键词已存在');
return;
}
addedTags.add(value);
// 创建标签元素
const tag = document.createElement('span');
tag.className = 'keyword-tag';
tag.innerHTML = `${value}`;
// 删除逻辑
tag.querySelector('button').onclick = () => {
container.removeChild(tag);
addedTags.delete(value);
};
container.appendChild(tag);
input.value = '';
input.focus();
}
});
</script>
