How to disable keyboard F5 key

之前有個需求是讓 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()

程式碼如下：  

view source
print?
01 (function($) {
02     /*
03     * 功能：將鍵盤按鍵 F5、Alt+Left(回上一頁)、Alt+Right(到下一頁) 按鍵 enable/disable
04     * 6-JUNE-2009
05     * by Walter Liao, http://www.dotblogs.com.tw/walter
06     * Examples:
07     * $.fn.disableF5Key();
08     * $.fn.enableF5Key();
09     */
10   
11     $.fn.extend({
12         disableF5Key: function() {
13             $(window.document).keydown(disableF5InnerFunc);
14         },
15   
16         enableF5Key: function() {
17             $(window.document).unbind("keydown", disableF5InnerFunc);
18         }
19     });
20   
21     function disableF5InnerFunc(event) {
22         var e;
23         if ($.browser.msie) { e = window.event; } else { e = event; }
24         if (e.keyCode == 116) { e.keyCode = 0; return false; }
25         if (e.altKey && (e.keyCode == 37 || e.keyCode == 39)) { return false; }
26     };
27 })(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。

view source
print?
01 <html xmlns="http://www.w3.org/1999/xhtml">
02 <head>
03     <title></title>
04     <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
05     <script src="disableF5Key.js" type="text/javascript"></script>
06 </head>
07 <body>
08     <input id="btnDisable" type="button" value="禁能" />
09     <input id="btnEnable" type="button" value="解除" />
10 </body>
11 </html>
12   
13 <script type="text/javascript" language="javascript">
14     $(function() { 
15         //設定按鈕按下後的動作 
16         $("#btnDisable").keydown($.fn.disableF5Key); 
17         $("#btnEnable").keydown($.fn.enableF5Key); 
18     }); 
19 </script>

相關連結：

posted @ 2011-03-02 16:06  rob_2010  阅读(240)  评论(0)    收藏  举报