如何检查KeyboardEvent.关键字在Javascript中的特定范围

How to check KeyboardEvent.key in specific range in Javascript

本文关键字：Javascript 范围 关键字 何检查 检查 KeyboardEvent      更新时间：2023-09-26

在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
}

对于可打印字符，.key()返回一个非空Unicode字符串，其中包含键的可打印表示形式。

本质上:对于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>

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

" KeyboardEvent。键只读属性返回用户按下的一个或多个键的值。"

返回的值是字符串。你可能需要继续使用key。检查范围的代码

或者，您可以使用switch语句，如mdn

中的示例所示。
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", ...]

，然后检查是否事件。键在数组中

最后你可以使用正则表达式

应该可以

<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>

仅用于字母(包括大写字母)的正则表达式代码如下

/^[a-z'D]

  • 'd -当你想包含数字时使用
  • 'D -不包括数字
因此，整个代码块看起来像这样: 

window.addEventListener('keydown', e => {
  
  const letterTyped = e.key;
        if (/^[a-z'D]$/i.test(letterTyped)) {
            console.log("Letter pressed: " + letterTyped);
        }
});

相关文章：