原生 CSS + JS 实现一个标签输入框

前端

2023-11-12 18:57:57

在当今快速发展的数字世界中，用户界面（UI）设计扮演着至关重要的角色。UI设计旨在通过优化用户与数字产品之间的交互，为用户创造直观、美观和高效的使用体验。其中，标签输入框作为一种常见的UI元素，在许多网站和应用程序中广泛使用。

标签输入框，顾名思义，就是允许用户输入并添加标签的输入框。标签可以用来分类、标记或信息，方便用户组织和查找内容。标签输入框在许多场景中都有应用，比如添加关键词、创建分类、收集反馈等。

本教程将从头开始指导您使用原生 CSS 和 JavaScript 实现一个标签输入框。我们将从了解标签输入框的基本原理和交互方式入手，逐步深入到具体的代码实现中。

原理和交互

标签输入框的原理非常简单。它是一个包含输入框和标签容器的容器元素。用户可以在输入框中输入内容，然后按回车键生成标签。生成的标签将被添加到标签容器中。用户还可以通过点击标签容器中的标签来删除它们。

以下是一些标签输入框常见的交互方式：

点击输入框：激活输入框，允许用户输入内容。
输入内容：在输入框中输入标签的内容。
按回车键：生成标签。
点击标签：选中标签。
点击标签中的删除按钮：删除标签。

HTML 结构

在开始编写 CSS 和 JavaScript 代码之前，我们需要先定义标签输入框的 HTML 结构。标签输入框的 HTML 结构通常如下所示：

<div class="tags-input">
  <input type="text" placeholder="输入标签">
  <div class="tags-container"></div>
</div>

在这个 HTML 结构中，<div class="tags-input">是标签输入框的容器元素，<input type="text" placeholder="输入标签">是输入框，<div class="tags-container"></div>是标签容器。

CSS 代码

接下来，我们需要编写 CSS 代码来定义标签输入框的样式。以下是一些基本的 CSS 样式：

/* 标签输入框的容器元素 */
.tags-input {
  display: flex;
  align-items: center;
  width: 100%;
  border: 1px solid #ccc;
  border-radius: 5px;
  padding: 5px;
}

/* 输入框 */
.tags-input input {
  width: 100%;
  border: none;
  outline: none;
  font-size: 14px;
}

/* 标签容器 */
.tags-container {
  display: flex;
  flex-wrap: wrap;
  margin-left: 5px;
}

/* 标签 */
.tags-container .tag {
  display: inline-block;
  padding: 5px;
  border: 1px solid #ccc;
  border-radius: 5px;
  margin-right: 5px;
  margin-bottom: 5px;
  font-size: 14px;
  cursor: pointer;
}

/* 选中标签 */
.tags-container .tag.selected {
  background-color: #ccc;
}

/* 标签中的删除按钮 */
.tags-container .tag .delete-btn {
  display: inline-block;
  width: 10px;
  height: 10px;
  border: 1px solid #ccc;
  border-radius: 5px;
  margin-left: 5px;
  cursor: pointer;
}

JavaScript 代码

最后，我们需要编写 JavaScript 代码来实现标签输入框的交互。以下是一些基本的 JavaScript 代码：

// 获取标签输入框元素
const tagsInput = document.querySelector('.tags-input');

// 获取输入框元素
const input = tagsInput.querySelector('input');

// 获取标签容器元素
const tagsContainer = tagsInput.querySelector('.tags-container');

// 添加标签
const addTag = (e) => {
  // 如果按的是回车键
  if (e.key === 'Enter') {
    // 获取输入框中的值
    const value = input.value;

    // 如果输入框中的值不为空
    if (value) {
      // 创建一个标签元素
      const tag = document.createElement('div');
      tag.classList.add('tag');
      tag.textContent = value;

      // 创建一个删除按钮
      const deleteBtn = document.createElement('button');
      deleteBtn.classList.add('delete-btn');
      deleteBtn.textContent = '×';

      // 将删除按钮添加到标签中
      tag.appendChild(deleteBtn);

      // 将标签添加到标签容器中
      tagsContainer.appendChild(tag);

      // 清空输入框
      input.value = '';

      // 为标签添加点击事件监听器
      tag.addEventListener('click', () => {
        tag.classList.toggle('selected');
      });

      // 为删除按钮添加点击事件监听器
      deleteBtn.addEventListener('click', () => {
        tag.remove();
      });
    }
  }
};

// 为输入框添加键盘事件监听器
input.addEventListener('keydown', addTag);