透過 jQuery 實現攔截鍵盤的 Ctrl+S 事件

想要在網頁上，允許使用者透過鍵盤的 Ctrl+S 來觸發事件，jQuery 可以幫你。

Ganeshji 在其部落格文章「Ctrl + Key Combination – Simple Jquery Plugin」介紹當如果只需要簡單的 Ctrl+? 鍵，又不想使用類似 js-hotkeys 功能這麼完整的外掛套件時，單單只靠幾行 jQuery 就可以完成了。

Ganeshji 首先使用 jQuery 的擴展定義了自己的 ctrl 函式：

$.ctrl = function(key, callback, args) {
    var isCtrl = false;
    $(document).keydown(function(e) {
        if(!args) args=[]; // IE barks when args is null

        if(e.ctrlKey) isCtrl = true;
        if(e.keyCode == key.charCodeAt(0) && isCtrl) {
            callback.apply(this, args);
            return false;
        }
    }).keyup(function(e) {
        if(e.ctrlKey) isCtrl = false;
    });
};

日後要引用 ctrl 函式，方法如下:

$.ctrl('S', function() {
    alert("Saved");
});

這範例，只要使用 Ctrl + S ，就會觸發 alert("Saved"); 實際上測試了不同瀏覽器，IE, Chrome, 都正常，但 FireFox 有點惱人的問題，就是當執行 Ctrl+S 時，FireFox 會跳出兩次另存新檔的對話視窗，這其實並不是我想要的結果。

為了避免 FireFox 跳出另存新檔的對話視窗，可以去攔截 keypress 的動作，並將原始的 Ctrl+S 事件濾掉。所以加了以下一段程式來完成。

$(window).keypress(function(event) {
      if ((event.which == 115 && event.ctrlKey)){
          event.preventDefault();
      }
    }); 

如此修改後，整個程式就更趨完整了。

附上範例程式：[下載]

參考：
01：Ctrl + Key Combination – Simple Jquery Plugin
02：js-hotkeys

後記：

在 Ganeshji 文章中有提到 js-hotkeys ，實際去玩了一下，發現他在 FireFox 也同樣存在著使用 Ctrl+S 會跳出兩次另存新檔視窗的問題，但用本編文章介紹的方式去攔截 keypress 就可解決。的確， js-hotkeys 真的是解決 web 上使用 keyboard 快捷鍵的好幫手，而 Ganeshji 則是提供了羽量級的解決方案，各位可斟酌使用。

附上 js-hotkeys 的測試程式：[下載]