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

WBOY
풀어 주다: 2023-10-18 09:25:57
원래의
1173명이 탐색했습니다.

如何使用 JavaScript 实现标签输入框功能?

JavaScript를 사용하여 태그 입력 상자 기능을 구현하는 방법

태그 입력 상자는 사용자가 여러 태그를 입력할 수 있고 태그를 동적으로 추가 및 삭제할 수 있는 일반적인 사용자 상호 작용 구성 요소입니다. 이 기사에서는 JavaScript를 사용하여 간단한 레이블 입력 상자 기능을 구현해 보겠습니다. 다음은 구체적인 구현 코드 예입니다.

HTML 구조

먼저 입력 태그에 대한요소와 HTML div의 표시 태그에 대한< ;컨테이너. HTML 코드는 다음과 같습니다:元素和一个显示标签的

容器。HTML代码如下:

 
로그인 후 복사

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
  6. JavaScript code

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

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

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

관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿
회사 소개 부인 성명 Sitemap
PHP 중국어 웹사이트:공공복지 온라인 PHP 교육,PHP 학습자의 빠른 성장을 도와주세요!