監聽 keydown / keypress 事件並區分一位數和兩位數

Question

我正在使用 eventListener 來檢測我的 vue 應用程序中的數字選項：

window.addEventListener("keydown", function (e) {
      switch (e.key) {
        case 1:
          // do stuff
          break;
        case 2:
          // do other stuff
      }
}

由於我有超過 9 個選項，我想知道最明智的方法是區分用戶輸入的是一位數還是兩位數（例如1 vs 11 ）？

Answer 1

最終調整了這篇博文中描述的解決方案，將所有擊鍵推入一個數組，如果 1 秒后沒有輸入，則該數組被清除。

    let keys = [];
    let timeout = null;

    window.addEventListener("keydown", function (e) {
      
      keys.push(e.key);
      clearTimeout(timeout);
      timeout = setTimeout(function () {
          let input = parseInt(keys.join(""));
 
            switch (input) {
              case 1:
                // do stuff
                break;
              case 11:
                // do other stuff

          }          
          keys = [];  
      }, 1000);
    });

Answer 2

switch 語句正在進行隱式類型轉換，因為e.key是一個字符串，而 switch case 說明符是數字。 如果您沒有超過 35 個選項，則使用基數 36 位（'1'-'9' 和 'a'-'z'）可能是最簡單的解決方案，同時按照以下行構造 switch 語句

  switch( e.key.toLowerCase() {
  case '1':  ... break;
  .
  .
  .
  case 'z':  ... break;
  }

在告訴用戶他們必須在 500 毫秒內擊中第二個數字並等待很長時間才能識別出他們擊中的第一個鍵之前，我會猶豫。 :-)