js禁止Backspace鍵使瀏覽器后退的實現(xiàn)方法
更新時間：2017年09月01日 09:49:53 投稿：jingxian
下面小編就為大家?guī)硪黄猨s禁止Backspace鍵使瀏覽器后退的實現(xiàn)方法。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
在項目中遇到按下Backspace鍵讓瀏覽器后退的問題，上網(wǎng)搜了幾種解決方案都不太理想。于是集眾人之智，采眾家之長，歸納如下：
1、在公用js中定義阻止Backspace的方法
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()方法阻止元素發(fā)生默認的行為
ev.preventDefault();
}
if(ev.returnValue){
//IE瀏覽器下用window.event.returnValue = false;實現(xiàn)阻止元素發(fā)生默認的行為
ev.returnValue = false;
}
return false;
}
方法注釋寫的很清晰了，這里不過多解釋。
2、頁面加載完成就調(diào)用該方法
$(function(){
//實現(xiàn)對字符碼的截獲，keypress中屏蔽了這些功能按鍵
document.onkeypress = banBackSpace;
//對功能按鍵的獲取
document.onkeydown = banBackSpace;
})
注： 按鍵事件觸發(fā)順序： keydown -> keypress ->textInput -> keyup
存在問題：select下拉列表展開后，無法獲取鍵盤事件，此時按Backspace鍵，瀏覽器還是會回退到歷史；解決辦法：將select下拉框改為easyUI的combobox;
以上這篇js禁止Backspace鍵使瀏覽器后退的實現(xiàn)方法就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了微信小程序開發(fā)技巧匯總,文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2019-07-07
這篇文章主要為大家介紹了HTTP?302?redirect應(yīng)用及作用詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2023-12-12
本篇文章是對JS修改URL參數(shù)的實現(xiàn)代碼進行了詳細的分析介紹，需要的朋友參考下2013-07-07
盡管 JavaScript 歷史上使用冗長而令人生厭的代碼塊來標的特定瀏覽器的時期已經(jīng)結(jié)束了，但是偶爾使用一些簡單的代碼塊和對象檢測來確保一些代碼在用戶機器上正常工作依然是必要的。2009-05-05
這篇文章主要介紹了JS實現(xiàn)的JSON序列化操作,結(jié)合簡單實例形式分析了json序列化操作相關(guān)實現(xiàn)方法與相關(guān)注意事項,代碼備有較為詳盡的注釋便于理解,需要的朋友可以參考下2018-07-07
這篇文章主要介紹了Javascript中arguments用法,實例分析了javascript利用arguments實現(xiàn)模擬重載功能,需要的朋友可以參考下2015-06-06
這篇文章主要介紹了父節(jié)點獲取子節(jié)點的字符串的方法,需要的朋友可以參考下2014-02-02
這篇文章主要為大家詳細介紹了JS實現(xiàn)百度搜索框，實時返回搜索建議項，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-02-02
js使用for循環(huán)及if語句判斷多個一樣的name
這篇文章主要介紹了js使用for循環(huán)機if語句判斷多個一樣的name,此法比較實用，需要的朋友可以參考下2014-09-09
這篇文章主要介紹了微信小程序之 catalog 切換實現(xiàn)解析,文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2019-09-09