當用戶按下 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 簡寫。

演示