在JavaScript中响应键盘快捷键的首选方式

Question

网上有很多关于这一点的想法，但其中很多都过时了，而且很多都是针对平台的。

如果我想响应保存的键盘快捷键(Mac上的⌘S， Linux/Windows上的control-S)，我知道我可以尝试这样做:

document.onkeypress=doit;
function doit(event) {
if(event.metaKey||event.ctrlKey) {
switch(event.key) {
case s: doSomething();
break;
//  etc
}
}
}

问题是metaKey应该只在Mac上工作，而ctrlKey应该只在Linux/Windows上工作。此外，我找不到一个简单的答案，我是否应该使用keypress事件或keyup或keydown。

问题是，做这件事的首选方法是什么?

Answer 1

好吧，这是一个解决方案。

• 正如@Tibrogargan提到的，keypress已被弃用，所以我应该使用keydown。
• 虽然Windows将win识别为元键，但它似乎不会触发该属性(参见如何通过JavaScript捕获Mac's命令键?)

我可以这样写:

document.addEventListener('keydown',doit);
function doit(event) {
if(event.metaKey || event.ctrlKey) {
switch(event.key) {
case s:
doSomething();
event.preventDefault();     //  Don’t Save
break;
//  etc
}
}
}

这并不能区分Mac用户何时按下ctrl-s，但是任何这样做的Mac用户都应该期待一个惊喜。

Answer 2

您可能会发现Keystrokes很有帮助。它没有依赖关系，而且非常容易使用。

使用它，你的代码看起来像这样:

import { bindKeyCombo } from '@rwh/keystrokes'
bindKeyCombo('super > s', doSomething)
bindKeyCombo('ctrl > s', doSomething)