在項目中遇到按下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;
哪位大神有更好的解決辦法請留言告知