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