CSSとJavaScriptでタグ入力フィールドを作成する方法

この記事では、外部ライブラリを使用せずに、HTML、CSS と JavaScript でタグ入力フィールドを作成する方法を説明しました。

サンプルはこちらです！

サンプルコード
まとめ

サンプルコード

HTML

まずはHTMLで基本的な構造を構築します。

力フィールドとタグを表示する領域を分け、拡張性を持たせるために<div>要素を使用しました。

<div id="tagInputContainer" class="tag-input-container">
  <div id="tagList" class="tag-list">
  </div>
  <input type="text" id="tagInput" class="tag-input" placeholder="タグを入力"/>
</div>

CSS

CSSでは、入力フィールドとタグそれぞれにシンプルなデザインを適用しています。

.tag-input-container {
  border: 1px solid #blue;
  border-radius: 5px;
  padding: 5px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  background: #fff;
}

.tag-list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  padding: 5px;
}

.tag {
  display: flex;
  align-items: center;
  margin: 2px;
  background: #e0e0e0;
  border-radius: 3px;
  padding: 5px;
}

.tag .close-btn {
  margin-left: 5px;
  cursor: pointer;
  color: #333;
}

.tag-input {
  flex: 1;
  border: none;
  padding: 5px;
  outline: none;
}

JavaScript

JavaScriptでは、イベントリスナーを利用してユーザーのアクションに応じた動的な動作を実装します。

document.addEventListener('DOMContentLoaded', function() {
  const tagInput = document.getElementById('tagInput');
  const tagList = document.getElementById('tagList');

  function createTag(label) {
    const div = document.createElement('div');
    div.setAttribute('class', 'tag');
    const span = document.createElement('span');
    span.innerHTML = label;
    const closeBtn = document.createElement('span');
    closeBtn.setAttribute('class', 'close-btn');
    closeBtn.innerHTML = '×';
    closeBtn.onclick = function() {
      div.remove();
    };
    div.appendChild(span);
    div.appendChild(closeBtn);
    return div;
  }

  function clearInput() {
    tagInput.value = '';
  }

  tagInput.addEventListener('keyup', function(event) {
    if (event.key === 'Enter' && tagInput.value) {
      const tag = createTag(tagInput.value);
      tagList.appendChild(tag);
      clearInput();
    }
  });

  tagInput.addEventListener('keydown', function(event) {
    if (event.key === 'Backspace' && !tagInput.value) {
      const tags = tagList.getElementsByClassName('tag');
      const lastTag = tags[tags.length - 1];
      if (lastTag) {
        lastTag.remove();
      }
    }
  });

  // タグリストのクリックイベントを無視する
  tagList.addEventListener('click', function(event) {
    event.stopPropagation();
  });

  // 入力ボックス以外の場所をクリックしたら、入力ボックスにフォーカスを当てる
  document.getElementById('tagInputContainer').addEventListener('click', function() {
    tagInput.focus();
  });
});

これにより、Enterキーでのタグ追加、Backspaceキーでのタグ削除、そしてタグ上のクローズボタンでの個別削除が可能となります。

まとめ

このサンプルコードでは、ユーザーがテキストを入力してEnterキーを押すとタグが生成され、Backspaceキーで最後のタグを削除できます。また、各タグにはクローズボタンがあり、これをクリックするとそのタグが削除されます。