基于原生CSS+JS怎么实现一个标签输入框

发布时间：2022-04-08 16:52:13 作者：iii
来源：亿速云阅读：581

基于原生CSS+JS怎么实现一个标签输入框

在现代Web开发中，标签输入框（Tag Input）是一种常见的UI组件，广泛应用于博客、社交媒体、任务管理工具等场景。它允许用户输入多个标签，并以可视化的方式展示这些标签。本文将详细介绍如何使用原生CSS和JavaScript实现一个功能完善的标签输入框。

1. 需求分析

在开始编码之前，我们需要明确标签输入框的基本功能需求：

输入框：用户可以输入文本，按回车键或逗号键将输入的文本转换为标签。
标签展示：已输入的标签以可视化的方式展示在输入框内。
标签删除：用户可以点击标签上的删除按钮或按退格键删除标签。
标签限制：可以设置最大标签数量，超过限制时禁止输入。
标签验证：可以对输入的标签进行格式验证，如长度、字符类型等。
标签样式：标签应具备基本的样式，如背景色、边框、圆角等。

2. HTML结构

首先，我们需要构建一个基本的HTML结构。标签输入框通常由一个外部的容器、一个输入框和一个用于展示标签的区域组成。

<div class="tag-input-container">
  <div class="tags">
    <!-- 标签将动态插入到这里 -->
  </div>
  <input type="text" class="tag-input" placeholder="输入标签并按回车">
</div>

3. CSS样式

接下来，我们为标签输入框添加一些基本的CSS样式，使其看起来更加美观。

.tag-input-container {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  border: 1px solid #ccc;
  padding: 5px;
  border-radius: 5px;
  background-color: #fff;
}

.tags {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.tag {
  display: flex;
  align-items: center;
  background-color: #e0e0e0;
  padding: 5px 10px;
  border-radius: 15px;
  font-size: 14px;
}

.tag .tag-close {
  margin-left: 5px;
  cursor: pointer;
  color: #888;
}

.tag .tag-close:hover {
  color: #333;
}

.tag-input {
  flex-grow: 1;
  border: none;
  outline: none;
  padding: 5px;
  font-size: 14px;
}

.tag-input::placeholder {
  color: #999;
}

4. JavaScript逻辑

现在，我们将通过JavaScript来实现标签输入框的核心功能。

4.1 初始化

首先，我们需要获取DOM元素，并初始化一些变量。

const tagInputContainer = document.querySelector('.tag-input-container');
const tagInput = document.querySelector('.tag-input');
const tagsContainer = document.querySelector('.tags');

let tags = [];
const maxTags = 5; // 最大标签数量

4.2 添加标签

当用户在输入框中按下回车键或逗号键时，我们将输入的文本转换为标签，并添加到标签容器中。

tagInput.addEventListener('keydown', (e) => {
  if (e.key === 'Enter' || e.key === ',') {
    e.preventDefault();
    const tagText = tagInput.value.trim();

    if (tagText && tags.length < maxTags) {
      tags.push(tagText);
      renderTags();
      tagInput.value = '';
    }
  }
});

4.3 渲染标签

每次添加或删除标签后，我们需要重新渲染标签容器中的内容。

function renderTags() {
  tagsContainer.innerHTML = '';
  tags.forEach((tag, index) => {
    const tagElement = document.createElement('div');
    tagElement.classList.add('tag');
    tagElement.innerHTML = `
      ${tag}
      <span class="tag-close" data-index="${index}">&times;</span>
    `;
    tagsContainer.appendChild(tagElement);
  });
}

4.4 删除标签

用户可以通过点击标签上的删除按钮来删除标签。

tagsContainer.addEventListener('click', (e) => {
  if (e.target.classList.contains('tag-close')) {
    const index = e.target.getAttribute('data-index');
    tags.splice(index, 1);
    renderTags();
  }
});

4.5 删除最后一个标签

当输入框为空时，用户可以通过按退格键删除最后一个标签。

tagInput.addEventListener('keydown', (e) => {
  if (e.key === 'Backspace' && tagInput.value === '') {
    tags.pop();
    renderTags();
  }
});

4.6 标签验证

我们可以对输入的标签进行一些简单的验证，例如限制标签的长度或字符类型。

function validateTag(tag) {
  return tag.length <= 20 && /^[a-zA-Z0-9]+$/.test(tag);
}

tagInput.addEventListener('keydown', (e) => {
  if (e.key === 'Enter' || e.key === ',') {
    e.preventDefault();
    const tagText = tagInput.value.trim();

    if (tagText && tags.length < maxTags && validateTag(tagText)) {
      tags.push(tagText);
      renderTags();
      tagInput.value = '';
    }
  }
});

5. 完整代码

将上述HTML、CSS和JavaScript代码整合在一起，我们得到一个完整的标签输入框实现。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>标签输入框</title>
  <style>
    .tag-input-container {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      border: 1px solid #ccc;
      padding: 5px;
      border-radius: 5px;
      background-color: #fff;
    }

    .tags {
      display: flex;
      flex-wrap: wrap;
      gap: 5px;
    }

    .tag {
      display: flex;
      align-items: center;
      background-color: #e0e0e0;
      padding: 5px 10px;
      border-radius: 15px;
      font-size: 14px;
    }

    .tag .tag-close {
      margin-left: 5px;
      cursor: pointer;
      color: #888;
    }

    .tag .tag-close:hover {
      color: #333;
    }

    .tag-input {
      flex-grow: 1;
      border: none;
      outline: none;
      padding: 5px;
      font-size: 14px;
    }

    .tag-input::placeholder {
      color: #999;
    }
  </style>
</head>
<body>
  <div class="tag-input-container">
    <div class="tags"></div>
    <input type="text" class="tag-input" placeholder="输入标签并按回车">
  </div>

  <script>
    const tagInputContainer = document.querySelector('.tag-input-container');
    const tagInput = document.querySelector('.tag-input');
    const tagsContainer = document.querySelector('.tags');

    let tags = [];
    const maxTags = 5; // 最大标签数量

    function renderTags() {
      tagsContainer.innerHTML = '';
      tags.forEach((tag, index) => {
        const tagElement = document.createElement('div');
        tagElement.classList.add('tag');
        tagElement.innerHTML = `
          ${tag}
          <span class="tag-close" data-index="${index}">&times;</span>
        `;
        tagsContainer.appendChild(tagElement);
      });
    }

    function validateTag(tag) {
      return tag.length <= 20 && /^[a-zA-Z0-9]+$/.test(tag);
    }

    tagInput.addEventListener('keydown', (e) => {
      if (e.key === 'Enter' || e.key === ',') {
        e.preventDefault();
        const tagText = tagInput.value.trim();

        if (tagText && tags.length < maxTags && validateTag(tagText)) {
          tags.push(tagText);
          renderTags();
          tagInput.value = '';
        }
      }

      if (e.key === 'Backspace' && tagInput.value === '') {
        tags.pop();
        renderTags();
      }
    });

    tagsContainer.addEventListener('click', (e) => {
      if (e.target.classList.contains('tag-close')) {
        const index = e.target.getAttribute('data-index');
        tags.splice(index, 1);
        renderTags();
      }
    });
  </script>
</body>
</html>

6. 总结

通过本文的介绍，我们使用原生CSS和JavaScript实现了一个功能完善的标签输入框。这个组件具备基本的标签添加、删除、验证和样式展示功能，并且可以根据实际需求进行扩展和定制。希望本文对你理解和实现标签输入框有所帮助。

基于原生CSS+JS怎么实现一个标签输入框

基于原生CSS+JS怎么实现一个标签输入框

1. 需求分析

2. HTML结构

3. CSS样式

4. JavaScript逻辑

4.1 初始化

4.2 添加标签

4.3 渲染标签

4.4 删除标签

4.5 删除最后一个标签

4.6 标签验证

5. 完整代码

6. 总结

相关阅读