如何使用JavaScript 實作標籤輸入框功能
標籤輸入框是常見的使用者互動元件,它允許使用者輸入多個標籤,並且可以動態添加、刪除標籤。在本文中,我們將使用 JavaScript來實作一個簡單的標籤輸入框功能。以下是具體的實作程式碼範例:
HTML 結構
#首先,我們需要在HTML中建立一個用於輸入標籤的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); }); }
程式碼解析
以上的範例程式碼透過以下步驟來實現標籤輸入框的功能:
tags
來儲存使用者輸入的標籤。 tags
陣列中,並且重新渲染標籤。 renderTags
函數來渲染標籤。它首先清空標籤容器,然後遍歷 tags
數組,建立標籤元素和刪除按鈕,並將它們新增到容器中。 tags
陣列中的位置,並刪除該元素,然後重新渲染標籤。 以上,我們已經成功地使用 JavaScript 實作了具有新增和刪除功能的標籤輸入框。你可以將以上的程式碼複製到你的專案中,並與其他文件結合使用來實現更複雜的功能。希望這篇文章對你有幫助!
以上是如何使用 JavaScript 實作標籤輸入框功能?的詳細內容。更多資訊請關注PHP中文網其他相關文章!