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

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!');
});

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

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 ，然后，如果在 Windows 上使用e.ctrlKey （e 是此处的事件），我们检查用户是否也按下了ctrl键，如果是 mac，则检查metaKey 。

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

演示