Question

在Javascript中，我有keydown事件的回调函数。我使用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>

Answer 2

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

“KeyboardEvent.key只读属性返回用户按下的一个或多个键的值。”

返回的值是字符串。如果要检查范围，则可能必须继续使用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>

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

2 个答案: