js禁止Backspace鍵使瀏覽器后退的實(shí)現(xiàn)方法

更新時(shí)間：2017年09月01日 09:49:53 投稿：jingxian

下面小編就為大家?guī)硪黄猨s禁止Backspace鍵使瀏覽器后退的實(shí)現(xiàn)方法。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧

在項(xiàng)目中遇到按下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 //標(biāo)簽名稱
 //如果標(biāo)簽不是input或者textarea則阻止Backspace
 if(tagName!='INPUT' && tagName!='TEXTAREA'){
  return stopIt(ev);
 }
 var tagType = obj.type.toUpperCase();//標(biāo)簽類型
 //input標(biāo)簽除了下面幾種類型，全部阻止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ā)生默認(rèn)的行為
 ev.preventDefault();
 }
 if(ev.returnValue){
 //IE瀏覽器下用window.event.returnValue = false;實(shí)現(xiàn)阻止元素發(fā)生默認(rèn)的行為
 ev.returnValue = false;
 }
 return false;
}

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

2、頁面加載完成就調(diào)用該方法

$(function(){
 //實(shí)現(xiàn)對字符碼的截獲，keypress中屏蔽了這些功能按鍵
 document.onkeypress = banBackSpace;
 //對功能按鍵的獲取
 document.onkeydown = banBackSpace;
 })

注：按鍵事件觸發(fā)順序： keydown -> keypress ->textInput -> keyup

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

以上這篇js禁止Backspace鍵使瀏覽器后退的實(shí)現(xiàn)方法就是小編分享給大家的全部內(nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

微信小程序開發(fā)技巧匯總
這篇文章主要介紹了微信小程序開發(fā)技巧匯總,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下
2019-07-07
HTTP?302?redirect應(yīng)用及介紹
這篇文章主要為大家介紹了HTTP?302?redirect應(yīng)用及作用詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪
2023-12-12
JS 修改URL參數(shù)(實(shí)現(xiàn)代碼)
本篇文章是對JS修改URL參數(shù)的實(shí)現(xiàn)代碼進(jìn)行了詳細(xì)的分析介紹，需要的朋友參考下
2013-07-07
FF和IE之間7個(gè)JavaScript的差異
盡管 JavaScript 歷史上使用冗長而令人生厭的代碼塊來標(biāo)的特定瀏覽器的時(shí)期已經(jīng)結(jié)束了，但是偶爾使用一些簡單的代碼塊和對象檢測來確保一些代碼在用戶機(jī)器上正常工作依然是必要的。
2009-05-05
JS實(shí)現(xiàn)的JSON序列化操作簡單示例
這篇文章主要介紹了JS實(shí)現(xiàn)的JSON序列化操作,結(jié)合簡單實(shí)例形式分析了json序列化操作相關(guān)實(shí)現(xiàn)方法與相關(guān)注意事項(xiàng),代碼備有較為詳盡的注釋便于理解,需要的朋友可以參考下
2018-07-07
Javascript中arguments用法實(shí)例分析
這篇文章主要介紹了Javascript中arguments用法,實(shí)例分析了javascript利用arguments實(shí)現(xiàn)模擬重載功能,需要的朋友可以參考下
2015-06-06
父節(jié)點(diǎn)獲取子節(jié)點(diǎn)的字符串示例代碼
這篇文章主要介紹了父節(jié)點(diǎn)獲取子節(jié)點(diǎn)的字符串的方法,需要的朋友可以參考下
2014-02-02
JS實(shí)現(xiàn)百度搜索框
這篇文章主要為大家詳細(xì)介紹了JS實(shí)現(xiàn)百度搜索框，實(shí)時(shí)返回搜索建議項(xiàng)，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2021-02-02
js使用for循環(huán)及if語句判斷多個(gè)一樣的name
這篇文章主要介紹了js使用for循環(huán)機(jī)if語句判斷多個(gè)一樣的name,此法比較實(shí)用，需要的朋友可以參考下
2014-09-09
微信小程序之 catalog 切換實(shí)現(xiàn)解析
這篇文章主要介紹了微信小程序之 catalog 切換實(shí)現(xiàn)解析,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下
2019-09-09