js禁止Backspace鍵使瀏覽器后退


在項目中遇到按下Backspace鍵讓瀏覽器后退的問題,上網搜了幾種解決方案都不太理想。於是集眾人之智,采眾家之長,歸納如下:

這里主要參考博客http://q821424508.iteye.com/blog/1587025

1、在公用js中定義阻止Backspace的方法

 1 function banBackSpace(e){
 2   var ev = e || window.event;
 3   //各種瀏覽器下獲取事件對象
 4   var obj = ev.relatedTarget || ev.srcElement || ev.target ||ev.currentTarget;
 5   //按下Backspace鍵
 6   if(ev.keyCode == 8){
 7     var tagName = obj.nodeName //標簽名稱
 8     //如果標簽不是input或者textarea則阻止Backspace
 9     if(tagName!='INPUT' && tagName!='TEXTAREA'){
10       return stopIt(ev);
11     }
12     var tagType = obj.type.toUpperCase();//標簽類型
13     //input標簽除了下面幾種類型,全部阻止Backspace
14     if(tagName=='INPUT' && (tagType!='TEXT' && tagType!='TEXTAREA' && tagType!='PASSWORD')){
15       return stopIt(ev);
16     }
17     //input或者textarea輸入框如果不可編輯則阻止Backspace
18     if((tagName=='INPUT' || tagName=='TEXTAREA') && (obj.readOnly==true || obj.disabled ==true)){
19       return stopIt(ev);
20     }
21   }
22 }
23 function stopIt(ev){
24   if(ev.preventDefault ){
25     //preventDefault()方法阻止元素發生默認的行為
26     ev.preventDefault();
27   }
28   if(ev.returnValue){
29     //IE瀏覽器下用window.event.returnValue = false;實現阻止元素發生默認的行為
30     ev.returnValue = false;
31   }
32   return false;
33 }

方法注釋寫的很清晰了,這里不過多解釋。

2、頁面加載完成就調用該方法

1 $(function(){
2   //實現對字符碼的截獲,keypress中屏蔽了這些功能按鍵
3   document.onkeypress = banBackSpace;
4   //對功能按鍵的獲取
5   document.onkeydown = banBackSpace;
6 })

注:  按鍵事件觸發順序: keydown -> keypress ->textInput -> keyup

存在問題:select下拉列表展開后,無法獲取鍵盤事件,此時按Backspace鍵,瀏覽器還是會回退到歷史;解決辦法:將select下拉框改為easyUI的combobox;

哪位大神有更好的解決辦法請留言告知

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM