JavaScript를 사용하여 라벨 입력 상자 기능을 구현하는 방법은 무엇입니까?

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

다음으로 JavaScript를 사용하여 라벨 입력 상자의 기능을 구현합니다. 코드는 다음과 같습니다.

1. 라벨 입력 상자와 라벨 컨테이너의 DOM 요소를 가져옵니다.
2. 사용자가 입력한 태그를 저장하려면 빈 배열tags를 정의하세요.
3. 사용자가 Enter 키를 누르면 입력 상자의 값을tags배열에 새 태그로 추가하고 태그를 다시 렌더링합니다.
4. 태그를 렌더링하려면renderTags함수를 정의하세요. 먼저 태그 컨테이너를 지운 다음tags배열을 반복하고 태그 요소와 삭제 버튼을 생성하여 컨테이너에 추가합니다.
5. 삭제 버튼의 클릭 이벤트 리스너를 사용하면 사용자가 라벨을 삭제할 수 있습니다.tags배열에서 클릭된 태그의 위치를 찾아 요소를 제거한 다음 태그를 다시 렌더링합니다. 위에서는 JavaScript를 사용하여 추가 및 삭제 기능이 포함된 태그 입력 상자를 성공적으로 구현했습니다. 위 코드를 프로젝트에 복사하고 다른 파일과 함께 사용하여 더 복잡한 기능을 구현할 수 있습니다. 이 기사가 도움이 되기를 바랍니다!

위 내용은 JavaScript를 사용하여 라벨 입력 상자 기능을 구현하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!