如何使用 JavaScript 實作標籤輸入框功能？

如何使用JavaScript 實作標籤輸入框功能

標籤輸入框是常見的使用者互動元件，它允許使用者輸入多個標籤，並且可以動態添加、刪除標籤。在本文中，我們將使用 JavaScript來實作一個簡單的標籤輸入框功能。以下是具體的實作程式碼範例：

HTML 結構

#首先，我們需要在HTML中建立一個用於輸入標籤的<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. 刪除按鈕的點擊事件監聽器允許使用者刪除標籤。它會尋找被點擊的標籤在 tags 陣列中的位置，並刪除該元素，然後重新渲染標籤。

以上，我們已經成功地使用 JavaScript 實作了具有新增和刪除功能的標籤輸入框。你可以將以上的程式碼複製到你的專案中，並與其他文件結合使用來實現更複雜的功能。希望這篇文章對你有幫助！

以上是如何使用 JavaScript 實作標籤輸入框功能？的詳細內容。更多資訊請關注PHP中文網其他相關文章！