【JavaScript】キーコード検索！(サンプルコード付き)

インプットボックスに値を入力してキーコードを手軽に検索できるようにしてみました。気になる方はサンプルコードもあるのでぜひ、確認してみてください。

キーコード検索！

※一覧はスクロール可能です。また、インプットボックスからフォーカスアウトするとテキストが空になり一覧もクリアされます。

このサンプルでは確認できない(Tab)、確認しにくいコード(F1〜F12)もあるためキーコードの一覧も合わせて確認してみてください！

キーコード一覧

サンプルコード

HTML

 <div class="custom-container">
    <label class="custom-label" for="inputBox">キーコード検索：</label>
    <input type="text" class="custom-input" id="inputBox" onkeydown="addKey(event)" oninput="checkInput()" onblur="clearInput()">
    <ul class="custom-list" id="keyList"></ul> 
  </div>

JavaScript

// 押されたキーとキーコードをリストに追加する関数
function addKey(event) {

  const key = event.key; // 押されたキーの値
  const keyCode = event.keyCode; // 押されたキーのコード

  // リストアイテムを作成
  const li = document.createElement('li');
  li.className = "custom-list-item";
  li.innerHTML = `KEY :  <span class="custom-key">"${key}"</span>、CODE :  <span class="custom-code">${keyCode}</span>`;

  // リストに追加
  document.getElementById('keyList').appendChild(li);
}

// インプットボックスの内容をチェックする関数
function checkInput() {
  const inputBox = document.getElementById('inputBox');
  if (inputBox.value === "") {
    // インプットボックスが空のとき、リストをクリア
    clearList();
  }
}

// フォーカスが外れたときにインプットボックスを空にする関数
function clearInput() {
  const inputBox = document.getElementById('inputBox');
  inputBox.value = ""; // インプットボックスを空にする

  // リストを少し遅れてクリア
  setTimeout(clearList, 0);
}

// リストをクリアする関数
function clearList() {
  const keyList = document.getElementById('keyList');
  keyList.innerHTML = ""; // 全てのリストアイテムを削除
}

CSS

.custom-container {
  background: #f2f2f1;
  padding: 20px;
  border-radius: 8px;
  max-width: 800px;
  /* コンテナの最大幅を設定 */
}

#inputBox {
  width: 200px;
}

.custom-label {
  font-weight: bold;
  margin-bottom: 10px;
  display: inline-block;
}

.custom-input {
  padding: 3px;
  width: 100%;
  border: 2px solid #007BFF;
  border-radius: 5px;
  font-size: 16px;
  position: sticky;
  /* スティッキーに設定 */
  top: 5px;
  /* 上からの距離を指定 */
  z-index: 10;
  /* 他の要素の上に表示 */
}

.custom-list {
  display: flex;
  /* 横並びにするための設定 */
  flex-wrap: wrap;
  /* ラップさせる */
  list-style-type: none;
  /* 箇条書きのスタイルをなしに */
  padding: 0;
  max-height: 170px;
  /* 最大高さを設定 */
  overflow-y: auto;
  /* 縦方向のスクロールを有効に */
  margin-top: 5px;
  /* インプットボックスの下にスペースを追加 */
}

.custom-list-item {
  background-color: #fff;
  border: 1px solid #ddd;
  border-radius: 5px;
  padding: 10px;
  margin: 5px;
  /* スペースを均等にするためにマージンを追加 */
  transition: background-color 0.3s;
  flex: 1 1 auto;
  /* アイテムを均等に配置する */
  min-width: 120px;
  /* 最小幅を設定 */
}

.custom-list-item:hover {
  background-color: #e7f1ff;
}

.custom-key {
  font-weight: bold;
  color: #007BFF;
}

.custom-code {
  color: #555;
}

まとめ

event.keyでキーを取得し、event.keyCodeでコードを取得しました。気になる方はサンプルコードを確認し、ローカルで試してみてください！