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

【问题标题】：How to check KeyboardEvent.key in specific range in Javascript如何在Javascript中检查特定范围内的KeyboardEvent.key
【发布时间】：2016-08-15 12:59:40
【问题描述】：

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

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

【问题讨论】：

标签： javascript keyevent

【解决方案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);
  }
});

&lt;input&gt;

对于字母，您还必须检查 .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);
  }
});

&lt;input&gt;

【讨论】：

修正数字和字符。但是，我用 (event.key >= ';' && event.key
另外，如果我检查 (event.key >= 'A' && event.key delete，end，tab，以此类推还在这个范围内。
@LeThanh - 请查看我更新的答案以获取另一个大写字母示例。关于你的第一条评论，我不明白。人物 ”;” to "`" 的范围是 59 到 96。
大写字符现在可以了。我在此链接 (css-tricks.com/snippets/javascript/javascript-keycodes) 中获得特殊字符的代码，它告诉我分号 (186)、等号 (187)、逗号 (188)、破折号 (189)、句点 (190)、正斜杠 ( 191）和重音（192）。可以再测试一下吗？
@LeThanh - 我明白了。您所指的表包含特定于 keyCode 的非标准代码，甚至可能因浏览器而异。请参考standard ASCII table，应该没问题。

【解决方案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>

【讨论】：

如果我想检查字符 a-z0-9 和一些特殊键，代码会很长。我不想使用不推荐使用的属性，例如 event.keyCode。属性 event.code 返回 DOM 字符串，所以也不能使用。有没有其他办法？
stackoverflow.com/questions/2257070/… 这个答案使用正则表达式，您也许可以检查密钥。我会阅读更多内容并回复您。
在我的测试中使用正则表达式。更新了我的答案以反映这一点。
没关系，但我认为你的方式更复杂