javascript - 如何在 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

对于可打印字符，.key()返回 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()返回单个字符，因为不可打印的键，例如 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>