HTML5 标签输入框（Tag Input）详解

标签输入框（Tag Input）是一种用户界面元素，允许用户输入多个标签或关键词，通常用于表单、搜索框或内容分类等场景。以下是实现标签输入框的详细讲解。
在这里插入图片描述

1. 任务概述

标签输入框允许用户动态添加和删除标签，提供更好的用户体验，特别是在需要输入多个项的情况下。

2. 代码结构

以下是一个简单的标签输入框实现示例：

<!DOCTYPE html>
<html lang="zh">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>标签输入框示例</title><style>/* CSS样式在此 */</style>
</head>
<body><h2>标签输入框（Tag Input）示例</h2><div class="tag-input-container"><input type="text" id="tag-input" placeholder="输入标签并按回车"><div class="tags" id="tags"></div>
</div><script>// JavaScript事件在此
</script></body>
</html>

3. HTML部分

<div class="tag-input-container"><input type="text" id="tag-input" placeholder="输入标签并按回车"><div class="tags" id="tags"></div>
</div>

<div class="tag-input-container">: 包裹标签输入框和已输入标签的容器。
<input type="text" id="tag-input">: 用户输入标签的文本框。
<div class="tags" id="tags">: 用于显示已输入的标签。

4. CSS样式

<style>.tag-input-container {border: 1px solid #ccc; /* 边框 */padding: 10px; /* 内边距 */border-radius: 5px; /* 圆角 */display: flex; /* 使用flex布局 */flex-wrap: wrap; /* 允许换行 */}#tag-input {border: none; /* 隐藏边框 */outline: none; /* 去掉默认焦点样式 */flex: 1; /* 输入框占据剩余空间 */min-width: 200px; /* 最小宽度 */padding: 5px; /* 内边距 */}.tags {display: flex; /* 标签容器使用flex布局 */flex-wrap: wrap; /* 允许换行 */margin-bottom: 5px; /* 底部间距 */}.tag {background-color: #2196F3; /* 标签背景色 */color: white; /* 标签文字颜色 */padding: 5px 10px; /* 标签内边距 */border-radius: 3px; /* 标签圆角 */margin: 5px; /* 标签间距 */display: flex; /* 标签使用flex布局 */align-items: center; /* 垂直居中 */}.tag .remove {margin-left: 5px; /* 删除按钮左间距 */cursor: pointer; /* 鼠标悬停变为手指 */}
</style>

.tag-input-container: 设置输入框的外观，包括边框、内边距和布局。
#tag-input: 设置输入框的样式，隐藏边框和焦点样式，并占用剩余空间。
.tags: 用于存放已输入标签的容器，允许标签换行。
.tag: 定义标签的样式，包括背景色、文字颜色和间距。
.remove: 定义删除按钮的样式。

5. JavaScript部分

<script>const tagInput = document.getElementById('tag-input');const tagsContainer = document.getElementById('tags');tagInput.addEventListener('keypress', function(event) {if (event.key === 'Enter' && tagInput.value.trim() !== '') {const tagValue = tagInput.value.trim();addTag(tagValue);tagInput.value = ''; // 清空输入框}});function addTag(tag) {const tagElement = document.createElement('div');tagElement.className = 'tag';tagElement.textContent = tag;const removeButton = document.createElement('span');removeButton.className = 'remove';removeButton.textContent = '×'; // 删除符号removeButton.onclick = function() {tagsContainer.removeChild(tagElement); // 删除标签};tagElement.appendChild(removeButton);tagsContainer.appendChild(tagElement); // 添加标签到容器}
</script>

获取元素: 使用document.getElementById获取输入框和标签容器。
事件监听: 监听输入框的keypress事件，当用户按下回车键时执行回调。
标签添加:
- 检查输入是否为空。
- 调用addTag函数添加标签。
- 清空输入框。
addTag函数:
- 创建一个新的标签元素和删除按钮。
- 将删除按钮的点击事件绑定到标签元素的删除操作。
- 将标签元素添加到标签容器中。