How to use JavaScript to implement the label input box function?

How to use JavaScript to implement the tag input box function

The tag input box is a common user interaction component that allows users to enter multiple tags and can be added dynamically , delete the label. In this article, we will use JavaScript to implement a simple label input box function. The following is a specific implementation code example:

HTML structure

First, we need to create an <input> element for the input tag and a display in HTML The <div> container of the tag. The HTML code is as follows:

<input id="tag-input" type="text" placeholder="请输入标签"/>
<div id="tag-container"></div>

JavaScript code

Next, we use JavaScript to implement the function of the label input box. The code is as follows:

// 获取标签输入框和标签容器元素
const input = document.getElementById('tag-input');
const container = document.getElementById('tag-container');

// 定义一个数组来存储用户输入的标签
let tags = [];

// 监听键盘按下事件，回车键添加标签
input.addEventListener('keydown', function(event) {
  if (event.keyCode === 13) {
    const tag = input.value.trim();
    
    // 检查标签是否已存在
    if (tags.includes(tag)) {
      alert('该标签已存在，请输入其他标签');
    } else if (tag !== '') {
      // 添加标签到数组
      tags.push(tag);
      
      // 清空输入框并重新渲染标签
      input.value = '';
      renderTags();
    }
  }
});

// 渲染标签函数
function renderTags() {
  // 清空标签容器
  container.innerHTML = '';
  
  // 遍历标签数组，创建标签元素并加入容器
  tags.forEach(function(tag) {
    const tagDiv = document.createElement('div');
    tagDiv.innerText = tag;
    
    // 为每个标签添加一个删除按钮
    const deleteButton = document.createElement('span');
    deleteButton.innerText = 'x';
    deleteButton.addEventListener('click', function(event) {
      // 获取被点击的标签的索引
      const index = tags.indexOf(tag);
      
      // 从标签数组中删除该元素并重新渲染标签
      tags.splice(index, 1);
      renderTags();
    });
    
    tagDiv.appendChild(deleteButton);
    container.appendChild(tagDiv);
  });
}

Code analysis

The above sample code implements the function of the label input box through the following steps:

1. Get the label input box and label The container's DOM element.
2. Define an empty array tags to store the tags entered by the user.
3. Listen to the keyboard press event. When the user presses the Enter key, add the value of the input box as a new tag to the tags array, and re-render the tag.
4. Definition renderTags Function to render tags. It first clears the tags container, then iterates through the tags array, creates tag elements and delete buttons, and adds them to the container.
5. The click event listener for the delete button allows the user to delete the label. It finds the clicked tag's position in the tags array, removes the element, and re-renders the tag.

Above, we have successfully used JavaScript to implement a label input box with add and delete functions. You can copy the above code into your project and use it with other files to implement more complex functions. Hope this article helps you!

The above is the detailed content of How to use JavaScript to implement the label input box function?. For more information, please follow other related articles on the PHP Chinese website!