當用戶按下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!'); 
}); 

由於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，後來，我們檢查，如果用戶如果在Windows中使用也按ctrl關鍵e.ctrlKey（e是事件在這裏），如果這是mac，然後檢查metaKey。

最後，我正在使用(e) => {}是一個用於function(e) {}的ES6速記。

Demo