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

JavaScript

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

キーコード検索!

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

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

    キーコード一覧

    F1F2F3F4F5F6
    112113114115116117
    F7F8F9F10F11F12
    118119120121122123
    F1〜F12
    BackSpaceTabEnterShiftCtrlAltPauseBreak
    891316171819
    CapsLockEscSpacePageUpPageDownEndHome
    20273233343536
    InsertDeleteNumLock
    373839404546144
    ScrollLock:;+^=<,_>.?/
    145186187188189190191
    {[@|}]
    219220221
    英数字以外のキー、記号など

    サンプルコード

    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コードを取得しました。気になる方はサンプルコードを確認し、ローカルで試してみてください!

    コメント