2010年9月9日 星期四

透過 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 的測試程式:[下載]

沒有留言:

張貼留言