解決瀏覽器中點選【Backspace】回退問題
阿新 • • 發佈:2019-01-05
問題:
工作中遇到在瀏覽器空白處,或者不可編輯的input框上,點選【Backspace】按鍵,出現瀏覽器頁面回退的問題,經過測試,發現谷歌瀏覽器預設遮蔽了這個回退的功能,但IE、360瀏覽器、火狐瀏覽器都沒有,這個功能會導致,特別是後臺系統,session丟失,退回到登入頁面,嚴重影響使用者體驗。
比如,使用者在進行表單的資訊填寫,不經意在瀏覽器空白處點選了【Backspace】按鍵,退到了登入介面,想想這是個什麼樣的體驗。
解決方法:
通過js監聽backspace按鍵的按下事件:
1、如果標籤不是input或者textarea則阻止Backspace
2、input標籤除了(TEXT、TEXTAREA、PASSWORD)這些型別,全部阻止Backspace
3、input或者textarea輸入框如果不可編輯則阻止Backspace
程式碼如下:
上述程式碼可以放到公共的js中,此處的程式碼參照此篇部落格:function banBackSpace(e) { var ev = e || window.event; //各種瀏覽器下獲取事件物件 var obj = ev.relatedTarget || ev.srcElement || ev.target || ev.currentTarget; //按下Backspace鍵 if (ev.keyCode == 8) { var tagName = obj.nodeName //標籤名稱 //如果標籤不是input或者textarea則阻止Backspace if (tagName != 'INPUT' && tagName != 'TEXTAREA') { return stopIt(ev); } var tagType = obj.type.toUpperCase();//標籤型別 //input標籤除了下面幾種型別,全部阻止Backspace if (tagName == 'INPUT' && (tagType != 'TEXT' && tagType != 'TEXTAREA' && tagType != 'PASSWORD')) { return stopIt(ev); } //input或者textarea輸入框如果不可編輯則阻止Backspace if ((tagName == 'INPUT' || tagName == 'TEXTAREA') && (obj.readOnly == true || obj.disabled == true)) { return stopIt(ev); } } } function stopIt(ev) { if (ev.preventDefault) { //preventDefault()方法阻止元素髮生預設的行為 ev.preventDefault(); } if (ev.returnValue) { //IE瀏覽器下用window.event.returnValue = false;實現阻止元素髮生預設的行為 ev.returnValue = false; } return false; } $(function() { //實現對字元碼的截獲,keypress中遮蔽了這些功能按鍵 document.onkeypress = banBackSpace; //對功能按鍵的獲取 document.onkeydown = banBackSpace; })
http://www.cnblogs.com/lujiulong/p/6019638.html
在此說明幾點:
1、 IE:有window.event物件
Firefox:沒有window.event物件。可以通過給函式的引數傳遞event物件。如onmousemove=doMouseMove(event)
統一的解決方法:var event = event || window.event;
2、 IE:even物件有srcElement屬性,但是沒有target屬性
Firefox:even物件有target屬性,但是沒有srcElement屬性
解決方法:var obj = event.relatedTarget || event.srcElement || event.target || event.currentTarget;