在 javascript 中捕获 ctrl+z 组合键

javascript combinations ctrl

2022-08-30 05:16:46

我正在尝试用以下代码在javascript中捕获+组合键：ctrlz

<html>
<head>
    <title>Untitled Document</title>
</head>
<body>

    <script type='text/javascript'>
        function KeyPress(e) {
            var evtobj = window.event? event : e


            //test1 if (evtobj.ctrlKey) alert("Ctrl");
            //test2 if (evtobj.keyCode == 122) alert("z");
            //test 1 & 2
            if (evtobj.keyCode == 122 && evtobj.ctrlKey) alert("Ctrl+z");
        }

        document.onkeypress = KeyPress;
    </script>

</body>
</html>

注释行“test1”如果我按住该键并按任何其他键，则会生成警报。ctrl

注释行“test2”如果我按键，将生成警报。z

按照“测试1和2”之后的行将它们放在一起，按住键然后按键不会按预期生成警报。ctrlz

代码有什么问题？

答案 1

使用（或），不onkeydownonkeyuponkeypress
使用 90，而不是 122keyCode

function KeyPress(e) {
      var evtobj = window.event? event : e
      if (evtobj.keyCode == 90 && evtobj.ctrlKey) alert("Ctrl+z");
}

document.onkeydown = KeyPress;

在线演示：http://jsfiddle.net/29sVC/

为了澄清，键码与字符码不同。

字符代码用于文本（它们因编码而异，但在很多情况下，0-127 仍然是 ASCII 代码）。键代码映射到键盘上的键。例如，在 unicode 字符中，0x22909 表示好。没有多少键盘（如果有的话）真正有一个键。

操作系统负责使用用户配置的输入方法将击键转换为字符代码。结果将发送到按键事件。（而键下和键控响应用户按下按钮，而不是键入文本。

答案 2

对于将来偶然发现这个问题的人来说，这里有一个更好的方法来完成工作：

document.addEventListener('keydown', function(event) {
  if (event.ctrlKey && event.key === 'z') {
    alert('Undo!');
  }
});

使用 event.key 极大地简化了代码，删除了硬编码的常量。它支持IE 9 +。

此外，使用 document.addEventListener 意味着您不会将其他侦听器聚集到同一事件。

最后，没有理由使用 window.event。它积极劝阻，并可能导致代码脆弱。