Wie verwende ich JavaScript, um die Funktion des Etiketteneingabefelds zu implementieren?

So verwenden Sie JavaScript, um die Funktion des Tag-Eingabefelds zu implementieren

Das Tag-Eingabefeld ist eine allgemeine Benutzerinteraktionskomponente, die es Benutzern ermöglicht, mehrere Tags einzugeben und Tags dynamisch hinzuzufügen und zu löschen. In diesem Artikel verwenden wir JavaScript, um eine einfache Etiketteneingabefeldfunktion zu implementieren. Das Folgende ist ein spezifisches Implementierungscodebeispiel:

HTML-Struktur

Zuerst müssen wir ein d5fd7aea971a85678ba271703566ebfd-Element für Eingabe-Tags und ein < für Anzeige-Tags in HTML div&gt erstellen ;Container. Der HTML-Code lautet wie folgt: d5fd7aea971a85678ba271703566ebfd元素和一个显示标签的dc6dce4a544fdca2df29d5ac0ea9906b容器。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
JavaScript-Code

Als nächstes verwenden wir JavaScript, um die Funktion des Etiketteneingabefelds zu implementieren. Der Code lautet wie folgt:

rrreee🎜Codeanalyse🎜🎜Der obige Beispielcode implementiert die Funktion des Etiketteneingabefelds durch die folgenden Schritte: 🎜

1. Rufen Sie die DOM-Elemente des Etiketteneingabefelds und des Etikettencontainers ab. 🎜
2. Definieren Sie ein leeres Array tags, um die vom Benutzer eingegebenen Tags zu speichern. 🎜
3. Hören Sie sich das Tastendruckereignis an. Wenn der Benutzer die Eingabetaste drückt, fügen Sie den Wert des Eingabefelds als neues Tag zum Array tags hinzu und rendern Sie das Tag erneut. 🎜
4. Definieren Sie die Funktion renderTags zum Rendern von Tags. Es löscht zunächst den Tag-Container, durchläuft dann das Array tags, erstellt Tag-Elemente und Löschschaltflächen und fügt sie dem Container hinzu. 🎜
5. Der Click-Event-Listener der Schaltfläche „Löschen“ ermöglicht es dem Benutzer, die Beschriftung zu löschen. Es findet die Position des angeklickten Tags im Array tags, entfernt das Element und rendert das Tag neu. 🎜🎜🎜 Oben haben wir mithilfe von JavaScript erfolgreich ein Tag-Eingabefeld mit Funktionen zum Hinzufügen und Löschen implementiert. Sie können den obigen Code in Ihr Projekt kopieren und ihn mit anderen Dateien verwenden, um komplexere Funktionen zu implementieren. Ich hoffe, dieser Artikel hilft Ihnen! 🎜

Das obige ist der detaillierte Inhalt vonWie verwende ich JavaScript, um die Funktion des Etiketteneingabefelds zu implementieren?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!