Comment utiliser JavaScript pour implémenter la fonction de zone de saisie d'étiquette ?

Comment utiliser JavaScript pour implémenter la fonction de zone de saisie de balise

La zone de saisie de balise est un composant d'interaction utilisateur courant qui permet aux utilisateurs de saisir plusieurs balises et d'ajouter et de supprimer dynamiquement des balises. Dans cet article, nous utiliserons JavaScript pour implémenter une simple fonction de zone de saisie d'étiquette. Voici un exemple de code d'implémentation spécifique :

Structure HTML

Tout d'abord, nous devons créer un élément <input> pour les balises d'entrée et un < pour les balises d'affichage dans HTML div> ;conteneur. Le code HTML est le suivant : <input>元素和一个显示标签的<div>容器。HTML代码如下：

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

JavaScript 代码

接下来，我们使用 JavaScript 来实现标签输入框的功能。代码如下：

// 获取标签输入框和标签容器元素
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);
  });
}

代码解析

以上的示例代码通过以下几个步骤来实现标签输入框的功能：

1. 获取标签输入框和标签容器的 DOM 元素。
2. 定义一个空的数组 tags 来存储用户输入的标签。
3. 监听键盘按下事件，当用户按下回车键时，将输入框的值作为一个新标签添加到 tags 数组中，并且重新渲染标签。
4. 定义 renderTags 函数来渲染标签。它首先清空标签容器，然后遍历 tags 数组，创建标签元素和删除按钮，并将它们添加到容器中。
5. 删除按钮的点击事件监听器允许用户删除标签。它查找被点击的标签在 tagsrrreee
Code JavaScript

Ensuite, nous utilisons JavaScript pour implémenter la fonction de la zone de saisie de l'étiquette. Le code est le suivant :

1. Récupérez les éléments DOM de la zone de saisie de l'étiquette et du conteneur d'étiquettes. 🎜
2. Définissez un tableau vide tags pour stocker les balises saisies par l'utilisateur. 🎜
3. Écoutez l'événement de pression sur le clavier. Lorsque l'utilisateur appuie sur la touche Entrée, ajoutez la valeur de la zone de saisie en tant que nouvelle balise au tableau tags et restituez la balise. 🎜
4. Définissez la fonction renderTags pour afficher les balises. Il efface d'abord le conteneur de balises, puis parcourt le tableau tags, crée des éléments de balise et des boutons de suppression, et les ajoute au conteneur. 🎜
5. L'écouteur d'événement de clic du bouton Supprimer permet à l'utilisateur de supprimer l'étiquette. Il trouve la position de la balise cliquée dans le tableau tags, supprime l'élément et restitue la balise. 🎜🎜🎜 Ci-dessus, nous avons implémenté avec succès une zone de saisie de balise avec des fonctions d'ajout et de suppression à l'aide de JavaScript. Vous pouvez copier le code ci-dessus dans votre projet et l'utiliser avec d'autres fichiers pour implémenter des fonctions plus complexes. J'espère que cet article vous aidera ! 🎜

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!