javascript阻止瀏覽器后退事件防止誤操作清空表單
更新時(shí)間：2013年11月22日 17:14:19 作者：
由于誤操作比較多，有時(shí)沒(méi)有選中文本框，然后不小心按了退格之后，剛剛辛苦填好的表單就什么也后退的沒(méi)有了，針對(duì)這個(gè)問(wèn)題，本文給出了詳細(xì)的解決方法，需要朋友不要錯(cuò)過(guò)
由于客戶(hù)大多數(shù)是不懂電腦的大菜鳥(niǎo)。所以誤操作比較多，有時(shí)沒(méi)有選中文本框，然后不小心按了退格之后，剛剛辛苦填好的表單就什么也后退的沒(méi)有了。網(wǎng)上查了好多資料，然后整合了一下。分享給大家。也希望酸奶姐姐來(lái)看看我的第一篇技術(shù)博客。呵呵(別介意我提到了你哦。)。廢話(huà)不多說(shuō)。上源碼。
$(function(){
//處理鍵盤(pán)事件 禁止后退鍵（Backspace）密碼或單行、多行文本框除外
function banBackSpace(e){
var ev = e || window.event;//獲取event對(duì)象
var obj = ev.target || ev.srcElement;//獲取事件源
var t = obj.type || obj.getAttribute('type');//獲取事件源類(lèi)型
//獲取作為判斷條件的事件類(lèi)型
var vReadOnly = obj.getAttribute('readonly');
var vEnabled = obj.getAttribute('enabled');
//處理null值情況
vReadOnly = (vReadOnly == null) ? false : true;
vEnabled = (vEnabled == null) ? true : vEnabled;
//當(dāng)敲Backspace鍵時(shí)，事件源類(lèi)型為密碼或單行、多行文本的，
//并且readonly屬性為true或enabled屬性為false的，則退格鍵失效
var flag1=(ev.keyCode == 8 && (t=="password" || t=="text" || t=="textarea")
&& (vReadOnly || vEnabled!=true))?true:false;
//當(dāng)敲Backspace鍵時(shí)，事件源類(lèi)型非密碼或單行、多行文本的，則退格鍵失效
var flag2=(ev.keyCode == 8 && t != "password" && t != "text" && t != "textarea")
?true:false;
//判斷
if(flag2){
return false;
}
if(flag1){
return false;
}
}
//禁止后退鍵 作用于Firefox、Opera
document.onkeypress=banBackSpace;
//禁止后退鍵 作用于IE、Chrome
document.onkeydown=banBackSpace;
window.history.forward(1);//屏蔽瀏覽器自帶的后退鍵
})
需要注意的地方是：
這段代碼一定要放到初始化方法中。然后用document.onkeypress=banBackSpace去調(diào)用自己寫(xiě)的方法。
vReadOnly = (vReadOnly == null) ? false : true;對(duì)于這段代碼，原來(lái)冒號(hào)后面是vReadOnly<span style="font-family: Arial, Helvetica, sans-serif;">這個(gè)值,后來(lái)發(fā)現(xiàn)在我項(xiàng)目中它返回空,不是null于是改成了true。</span>
按照上面方法即可實(shí)現(xiàn)在非text,password,textare時(shí)按退格阻止瀏覽器后退事件，但是不會(huì)阻止在文本框有值時(shí)的退格事件。這是我的第一篇博客，希望各位多多捧場(chǎng)。
復(fù)制代碼 代碼如下:
$(function(){
//處理鍵盤(pán)事件 禁止后退鍵（Backspace）密碼或單行、多行文本框除外
function banBackSpace(e){
var ev = e || window.event;//獲取event對(duì)象
var obj = ev.target || ev.srcElement;//獲取事件源
var t = obj.type || obj.getAttribute('type');//獲取事件源類(lèi)型
//獲取作為判斷條件的事件類(lèi)型
var vReadOnly = obj.getAttribute('readonly');
var vEnabled = obj.getAttribute('enabled');
//處理null值情況
vReadOnly = (vReadOnly == null) ? false : true;
vEnabled = (vEnabled == null) ? true : vEnabled;
//當(dāng)敲Backspace鍵時(shí)，事件源類(lèi)型為密碼或單行、多行文本的，
//并且readonly屬性為true或enabled屬性為false的，則退格鍵失效
var flag1=(ev.keyCode == 8 && (t=="password" || t=="text" || t=="textarea")
&& (vReadOnly || vEnabled!=true))?true:false;
//當(dāng)敲Backspace鍵時(shí)，事件源類(lèi)型非密碼或單行、多行文本的，則退格鍵失效
var flag2=(ev.keyCode == 8 && t != "password" && t != "text" && t != "textarea")
?true:false;
//判斷
if(flag2){
return false;
}
if(flag1){
return false;
}
}
//禁止后退鍵 作用于Firefox、Opera
document.onkeypress=banBackSpace;
//禁止后退鍵 作用于IE、Chrome
document.onkeydown=banBackSpace;
window.history.forward(1);//屏蔽瀏覽器自帶的后退鍵
})
需要注意的地方是：
這段代碼一定要放到初始化方法中。然后用document.onkeypress=banBackSpace去調(diào)用自己寫(xiě)的方法。
復(fù)制代碼 代碼如下:
vReadOnly = (vReadOnly == null) ? false : true;對(duì)于這段代碼，原來(lái)冒號(hào)后面是vReadOnly<span style="font-family: Arial, Helvetica, sans-serif;">這個(gè)值,后來(lái)發(fā)現(xiàn)在我項(xiàng)目中它返回空,不是null于是改成了true。</span>
按照上面方法即可實(shí)現(xiàn)在非text,password,textare時(shí)按退格阻止瀏覽器后退事件，但是不會(huì)阻止在文本框有值時(shí)的退格事件。這是我的第一篇博客，希望各位多多捧場(chǎng)。
您可能感興趣的文章:
- 阻止JavaScript事件冒泡傳遞（cancelBubble 、stopPropagation）
- js阻止默認(rèn)事件與js阻止事件冒泡示例分享 js阻止冒泡事件
- javascript事件冒泡詳解和捕獲、阻止方法
- js冒泡、捕獲事件及阻止冒泡方法詳細(xì)總結(jié)
- js阻止冒泡及jquery阻止事件冒泡示例介紹
- zepto.js中tap事件阻止冒泡的實(shí)現(xiàn)方法
- javascript阻止scroll事件多次執(zhí)行的思路及實(shí)現(xiàn)
- JS阻止冒泡事件以及默認(rèn)事件發(fā)生的簡(jiǎn)單方法
- Js 冒泡事件阻止實(shí)現(xiàn)代碼
- JavaScript實(shí)現(xiàn)事件的中斷傳播和行為阻止方法示例
相關(guān)文章
JavaScript用20行代碼實(shí)現(xiàn)虎年春節(jié)倒計(jì)時(shí)
春節(jié)將至，相信大家跟小編一樣很激動(dòng)呀。為了迎接虎年春節(jié)到來(lái)，小編為大家準(zhǔn)備了一個(gè)虎年春節(jié)倒計(jì)時(shí)，僅20行代碼用js就實(shí)現(xiàn)啦。感興趣的可以動(dòng)手試一試2022-01-01
JS復(fù)制對(duì)應(yīng)id的內(nèi)容到粘貼板（Ctrl+C效果）
這篇文章主要給大家介紹了利用JS實(shí)現(xiàn)復(fù)制指定對(duì)應(yīng)id的內(nèi)容到粘貼板（Ctrl+C效果）,文中給出了詳細(xì)的介紹和示例代碼，有需要的朋友可以參考借鑒，下面來(lái)一起看看吧。2017-01-01
window.showModalDialog參數(shù)傳遞中含有特殊字符的處理方法
程序運(yùn)行出錯(cuò)經(jīng)，過(guò)檢查發(fā)現(xiàn)傳遞的數(shù)據(jù)中出現(xiàn)了#等特殊字符，瀏覽器只取到#號(hào)前面的數(shù)據(jù)，后面的被截?cái)啵旅鏋榇蠹医榻B下正確的處理方法2013-06-06
hash特點(diǎn)、hashchange事件介紹及其常見(jiàn)應(yīng)用場(chǎng)景
淺析hash特點(diǎn)、hashchange事件介紹及其常見(jiàn)應(yīng)用場(chǎng)景（不同hash對(duì)應(yīng)不同事件處理、移動(dòng)端大圖展示狀態(tài)后退頁(yè)面問(wèn)題、原生輕應(yīng)用頭部后退問(wèn)題、移動(dòng)端自帶返回按鈕二次確認(rèn)問(wèn)題）,hashchange和popstate事件觸發(fā)條件2023-11-11
JS偽繼承prototype實(shí)現(xiàn)方法示例
這篇文章主要介紹了JS偽繼承prototype實(shí)現(xiàn)方法,結(jié)合實(shí)例形式對(duì)比分析了基于prototype實(shí)現(xiàn)模擬繼承的相關(guān)操作技巧,需要的朋友可以參考下2018-06-06
小程序的openid相當(dāng)重要,它是用戶(hù)的唯一標(biāo)識(shí)id,牽扯的支付,登錄,授權(quán)等,下面這篇文章主要給大家介紹了關(guān)于微信小程序獲取用戶(hù)openid的相關(guān)資料,需要的朋友可以參考下2022-04-04
看了網(wǎng)上好多在vscode上調(diào)試javascript的代碼，總是出現(xiàn)問(wèn)題，索性自己寫(xiě)一個(gè)，下面這篇文章主要給大家介紹了關(guān)于如何利用vscode調(diào)試編譯后的js代碼的相關(guān)資料，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們一起來(lái)看看吧2018-05-05
這篇文章主要介紹了簡(jiǎn)單的JS輪播圖實(shí)現(xiàn)方法，代碼簡(jiǎn)單易懂，非常不錯(cuò)，具有參考借鑒價(jià)值,需要的朋友可以參考下2016-07-07
JS實(shí)現(xiàn)的四級(jí)密碼強(qiáng)度檢測(cè)功能示例
這篇文章主要介紹了JS實(shí)現(xiàn)的四級(jí)密碼強(qiáng)度檢測(cè)功能,具有實(shí)時(shí)檢測(cè)輸入密碼強(qiáng)度的功能,涉及javascript針對(duì)字符串的正則判定相關(guān)操作技巧,需要的朋友可以參考下2017-05-05
echart簡(jiǎn)介_(kāi)動(dòng)力節(jié)點(diǎn)Java學(xué)院整理
這篇文章主要介紹了echart簡(jiǎn)介，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-08-08