Bagaimana untuk menggunakan JavaScript untuk melaksanakan fungsi kotak input label?

Cara menggunakan JavaScript untuk melaksanakan fungsi kotak input teg

Kotak input teg ialah komponen interaksi pengguna biasa yang membolehkan pengguna masuk berbilang teg, dan teg boleh ditambah dan dipadamkan secara dinamik. Dalam artikel ini, kami akan menggunakan JavaScript untuk melaksanakan fungsi kotak input label ringkas. Berikut ialah contoh kod pelaksanaan khusus:

struktur HTML

Pertama, kita perlu mencipta <input>untuk teg input dalam HTML > elemen dan bekas <div> yang memaparkan teg. Kod HTML adalah seperti berikut: <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
Kod JavaScript

Seterusnya, kami menggunakan JavaScript untuk melaksanakan fungsi kotak input label. Kodnya adalah seperti berikut:

rrreee#🎜🎜#Analisis kod#🎜🎜##🎜🎜#Kod sampel di atas melaksanakan fungsi kotak input label melalui langkah berikut: #🎜🎜#

Dapatkan elemen DOM untuk kotak input label dan bekas label. #🎜🎜#
1. Tentukan tatasusunan kosong teg untuk menyimpan teg yang dimasukkan oleh pengguna. #🎜🎜#
2. Dengar acara tekan papan kekunci Apabila pengguna menekan kekunci Enter, tambahkan nilai kotak input sebagai teg baharu pada tatasusunan teg dan tunjukkan semula. tag. #🎜🎜#
3. Tentukan fungsi renderTags untuk memaparkan teg. Ia mula-mula mengosongkan bekas teg, kemudian melelang melalui tatasusunan teg, mencipta elemen teg dan butang padam dan menambahkannya pada bekas. #🎜🎜#
4. Pendengar acara klik butang padam membolehkan pengguna memadamkan teg. Ia mencari kedudukan teg yang diklik dalam tatasusunan teg, mengalih keluar elemen dan memaparkan semula teg. #🎜🎜##🎜🎜##🎜🎜# Di atas, kami telah berjaya menggunakan JavaScript untuk melaksanakan kotak input label dengan fungsi tambah dan padam. Anda boleh menyalin kod di atas ke dalam projek anda dan menggunakannya dengan fail lain untuk melaksanakan fungsi yang lebih kompleks. Harap artikel ini membantu anda! #🎜🎜#

Atas ialah kandungan terperinci Bagaimana untuk menggunakan JavaScript untuk melaksanakan fungsi kotak input label?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!