Question

我有一个可以保存会话的网站，但我认为按钮很难看，所以我认为快捷方式会更容易，我更喜欢onkeydown HTML标签功能。我想要使用的快捷方式是 CTRL + S 。例如

<input type="text" onkeydown="if(event.keyCode == CTRL+S) saveSession()">

Answer 1

我爱上了Mousetrap图书馆：https://craig.is/killing/mice。它通过很好的浏览器支持来规范化键绑定。

例如：

Mousetrap.bind('ctrl+s', function(e) {
    alert('Save!');
});

由于ctrl不用于在Mac上保存，因此您可以将多个组合键绑定到保存功能，例如

Mousetrap.bind(['ctrl+s', 'command+s'], function(e) {
    alert('Save!');
});

Answer 2

添加了适用于Windows和Mac的解决方案，之前仅针对Mac进行了解答。

document.addEventListener('keydown', (e) => {
  if (e.keyCode === 83 && (navigator.platform.match('Mac') ? e.metaKey : e.ctrlKey)) {
    e.preventDefault();
    alert('captured');
  }
});

在function中添加上述代码并将其命名为onkeydown。关于代码如何工作的一些解释..

首先，我们检查s的密钥代码是83，然后，我们检查用户是否也按ctrl密钥，如果在Windows上使用e.ctrlKey（e是这里的事件）如果它是mac，那么检查metaKey。

最后，使用(e) => {}是function(e) {}的ES6简写。

Demo

当用户按下CTRL + S时如何捕获？

2 个答案: