JavaScript を使用してラベル入力ボックス機能を実装するにはどうすればよいですか?

JavaScript を使用してタグ入力ボックス機能を実装する方法

タグ入力ボックスは、ユーザーが複数のタグを入力したり追加したりできる一般的なユーザー インタラクション コンポーネントです。動的にラベルを削除します。この記事では、JavaScript を使用して簡単なラベル入力ボックス機能を実装します。以下は、具体的な実装コードの例です。

HTML 構造

まず、HTML で input タグと表示用の <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. キーボード押下イベントをリッスンします。ユーザーが Enter キーを押すと、入力ボックスの値を新しいタグとして tags 配列に追加し、タグを再レンダリングします。
4. 定義 renderTags タグをレンダリングする関数。まずタグ コンテナをクリアし、次に tags 配列を反復処理してタグ要素と削除ボタンを作成し、それらをコンテナに追加します。
5. 削除ボタンのクリック イベント リスナーを使用すると、ユーザーはラベルを削除できます。クリックされたタグの位置を tags 配列内で検索し、要素を削除して、タグを再レンダリングします。

上記では、JavaScript を使用して、追加機能と削除機能を備えたラベル入力ボックスを実装することに成功しました。上記のコードをプロジェクトにコピーし、他のファイルとともに使用して、より複雑な関数を実装できます。この記事がお役に立てば幸いです!

以上がJavaScript を使用してラベル入力ボックス機能を実装するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。