如何在 Javascript 的特定范围内检查 KeyboardEvent.key

Question

在Javascript中，我有按键事件的回调函数。我使用 keyCode 和 which 属性来检测用户按下了哪些键。

var keyPressed = event.keyCode || event.which;
if (keyPressed > 47 && keyPressed < 58) {
    //do something
}

效果很好。但是，这个属性已被弃用，我切换到 key 属性。当我替换代码时，它无法正常工作。

if (event.key > 47 && event.key < 58) {
        //do something
}

我无法在范围内检查用户按下的键。

Answer 1

根据 https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/key

"The KeyboardEvent.key read-only property returns the value of a key or keys pressed by the user."

返回的值是字符串。如果您想检查范围，您可能必须继续使用 key.code。

或者你可以像 mdn

上的例子一样使用 switch 语句

switch (event.key) {
    case "ArrowDown":
      // Do something for "down arrow" key press.
      break;
    case "ArrowUp":
      // Do something for "up arrow" key press.
      break;
    case "ArrowLeft":
      // Do something for "left arrow" key press.
      break;
    case "ArrowRight":
      // Do something for "right arrow" key press.
      break;
    case "Enter":
      // Do something for "enter" or "return" key press.
      break;
    case "Escape":
      // Do something for "esc" key press.
      break;
    default:
      return; // Quit when this doesn't handle the key event.
  }

或者事件仍然像

那样创建一个数组

 var validKeys = ["ArrowDown", "ArrowUp", ...]

然后检查 event.key 是否在数组中。

终于可以使用正则表达式了

这应该有效

<script type="text/javascript">

      document.addEventListener('keydown', function(event){
        var charTyped = event.key;
        if (/^[a-z\d]$/i.test(charTyped)) {
            console.log("Letter or number typed: " + charTyped);
        }
      })


</script>

Answer 2

对于可打印字符，.key() returns a non-empty Unicode character string containing the printable representation of the key.

本质上：对于 ASCII 字符，您得到的是字符本身而不是它的 ASCII 代码。

因此，对于数字，您可以这样做：

var myInput = document.getElementsByTagName('input')[0];

myInput.addEventListener("keydown", function(event) {
  if(event.key >= "0" && event.key <= "9") {
    console.log('digit: ' + event.key);
  }
});

<input>

对于字母，您还必须检查 .key() returns 单个字符，因为 delete 等不可打印的键将被编码为 "Delete", 这将通过测试 "Delete" >= "A" && "Delete" <= "Z".

var myInput = document.getElementsByTagName('input')[0];

myInput.addEventListener("keydown", function(event) {
  if(event.key.length == 1 && event.key >= "A" && event.key <= "Z") {
    console.log('capital letter: ' + event.key);
  }
});

<input>

如何在 Javascript 的特定范围内检查 KeyboardEvent.key

How to check KeyboardEvent.key in specific range in Javascript

javascript

keyevent