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

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

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

HTML 구조

먼저 입력 태그에 대한 <input> 요소와 HTML div의 표시 태그에 대한 < ;컨테이너. 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. 删除按钮的点击事件监听器允许用户删除标签。它查找被点击的标签在 tagsrrreee
JavaScript code

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

rrreee🎜코드 분석🎜🎜위 샘플 코드는 다음 단계를 통해 라벨 입력 상자의 기능을 구현합니다. 🎜

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

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