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

news2025/1/5 9:15:08

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函数:
- 创建一个新的标签元素和删除按钮。
- 将删除按钮的点击事件绑定到标签元素的删除操作。
- 将标签元素添加到标签容器中。