[jQuery] How to disable keyboard F5 key

2009-06-06

12522
0
jQuery
2009-06-29

之前有個需求是讓 User 按下確定鈕後，程式會呼叫 Flash 進行一段小動畫，執行完後會告知 User 中獎的獎項資料，因為 Flash 執行期間 User 不小心按了 F5 進行重新整理後就會看不到中獎獎項，雖然 User 事後可以使用查詢功能查詢中獎資料，但 Flash 執行到一半就中斷感覺不是很好，所以就寫了一個可以將鍵盤 F5 功能禁能的程式(包含回上頁、回下頁禁能)

我將程式用 jQuery 包成了2 個 Function：
disableF5Key：禁止按下鍵盤 F5、Alt+Left(回上一頁)、Alt+Right(到下一頁) 按鍵
enableF5Key ：允許按下鍵盤 F5、Alt+Left(回上一頁)、Alt+Right(到下一頁) 按鍵

使用時可以依自己需求，看是要頁面載入後就直接禁能，直到頁面關閉，還是按下特定功能後禁能，執行完後再解除。

要禁能時執行 $.fn.disableF5Key()
要解除時執行 $.fn.enableF5Key()

程式碼如下：


(function($) {
    /*
    * 功能：將鍵盤按鍵 F5、Alt+Left(回上一頁)、Alt+Right(到下一頁) 按鍵 enable/disable
    * 6-JUNE-2009
    * by Walter Liao, http://www.dotblogs.com.tw/walter
    * Examples:
    * $.fn.disableF5Key();
    * $.fn.enableF5Key();
    */

    $.fn.extend({
        disableF5Key: function() {
            $(window.document).keydown(disableF5InnerFunc);
        },

        enableF5Key: function() {
            $(window.document).unbind("keydown", disableF5InnerFunc);
        }
    });

    function disableF5InnerFunc(event) {
        var e;
        if ($.browser.msie) { e = window.event; } else { e = event; }
        if (e.keyCode == 116) { e.keyCode = 0; return false; }
        if (e.altKey && (e.keyCode == 37 || e.keyCode == 39)) { return false; }
    };
})(jQuery);

IE 直接套用 window.event 就可以抓到按鍵值了，而 FireFox 需使用 jQuery 傳入的事件來處理，所以 IE、FireFox 之間處理的差異就差在 IE 使用 window.event，而 FireFox 使用事件觸發時傳入的 event。

【2009-06-06更新】附上一個簡易測試範例，執行此測試總共須要 2 個檔案，第 1 個檔案是將下方的程式碼複製後存成html檔案，第 2 個檔案是將此網頁上方 disableF5Key 的 jQuery 程式碼存成 disableF5Key.js 檔案，2 個檔案放在相同的路徑下就可以執行了。

執行後畫面上會有 2 個按鈕，可在按下按鈕後，再按 F5 測試網頁的重新整理。

若對於 jQuery 語法不熟悉，可以參考保哥推薦的教學影片學習 jQuery 從入門到精通只要兩小時！。

將下方的程式碼存成html，再將此網頁上方 disableF5Key 的 jQuery 程式碼存成 disableF5Key.js。
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script> <script src="disableF5Key.js" type="text/javascript"></script> </head> <body> <input id="btnDisable" type="button" value="禁能" /> <input id="btnEnable" type="button" value="解除" /> </body> </html> <script type="text/javascript" language="javascript"> $(function() { //設定按鈕按下後的動作 $("#btnDisable").keydown($.fn.disableF5Key); $("#btnEnable").keydown($.fn.enableF5Key); }); </script>

相關連結：

jQuery - keydown/up/press test (可查詢各按鍵 keyCode 值)
JavaScript Madness: Keyboard Events (說明不同瀏覽器 keyCode 值的差異)

jQuery

回首頁