javascript阻止瀏覽器后退事件防止誤操作清空表單
更新時(shí)間：2013年11月22日 17:14:19 作者：
由于誤操作比較多，有時(shí)沒(méi)有選中文本框，然后不小心按了退格之后，剛剛辛苦填好的表單就什么也后退的沒(méi)有了，針對(duì)這個(gè)問(wèn)題，本文給出了詳細(xì)的解決方法，需要朋友不要錯(cuò)過(guò)
由于客戶大多數(shù)是不懂電腦的大菜鳥。所以誤操作比較多，有時(shí)沒(méi)有選中文本框，然后不小心按了退格之后，剛剛辛苦填好的表單就什么也后退的沒(méi)有了。網(wǎng)上查了好多資料，然后整合了一下。分享給大家。也希望酸奶姐姐來(lái)看看我的第一篇技術(shù)博客。呵呵(別介意我提到了你哦。)。廢話不多說(shuō)。上源碼。
$(function(){
//處理鍵盤事件 禁止后退鍵（Backspace）密碼或單行、多行文本框除外
function banBackSpace(e){
var ev = e || window.event;//獲取event對(duì)象
var obj = ev.target || ev.srcElement;//獲取事件源
var t = obj.type || obj.getAttribute('type');//獲取事件源類型
//獲取作為判斷條件的事件類型
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í)，事件源類型為密碼或單行、多行文本的，
//并且readonly屬性為true或enabled屬性為false的，則退格鍵失效
var flag1=(ev.keyCode == 8 && (t=="password" || t=="text" || t=="textarea")
&& (vReadOnly || vEnabled!=true))?true:false;
//當(dāng)敲Backspace鍵時(shí)，事件源類型非密碼或單行、多行文本的，則退格鍵失效
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)用自己寫的方法。
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(){
//處理鍵盤事件 禁止后退鍵（Backspace）密碼或單行、多行文本框除外
function banBackSpace(e){
var ev = e || window.event;//獲取event對(duì)象
var obj = ev.target || ev.srcElement;//獲取事件源
var t = obj.type || obj.getAttribute('type');//獲取事件源類型
//獲取作為判斷條件的事件類型
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í)，事件源類型為密碼或單行、多行文本的，
//并且readonly屬性為true或enabled屬性為false的，則退格鍵失效
var flag1=(ev.keyCode == 8 && (t=="password" || t=="text" || t=="textarea")
&& (vReadOnly || vEnabled!=true))?true:false;
//當(dāng)敲Backspace鍵時(shí)，事件源類型非密碼或單行、多行文本的，則退格鍵失效
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)用自己寫的方法。
復(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)文章
JS使用new操作符創(chuàng)建對(duì)象的方法分析
這篇文章主要介紹了JS使用new操作符創(chuàng)建對(duì)象的方法,結(jié)合實(shí)例形式分析了javascript面向?qū)ο蟪绦蛟O(shè)計(jì)類的定義、new操作符對(duì)象的創(chuàng)建及相關(guān)操作注意事項(xiàng),需要的朋友可以參考下2019-05-05
js中的bigint類型轉(zhuǎn)化為json字符串時(shí)報(bào)無(wú)法序列化的問(wèn)題
JSON序列化指將JSON對(duì)象轉(zhuǎn)換為JSON字符串,J實(shí)現(xiàn)方式有兩種：一種是調(diào)用JSON對(duì)象內(nèi)置的stringify()函數(shù),一種是為對(duì)象自定義toJSON()函數(shù),本文重點(diǎn)介紹js中的bigint類型轉(zhuǎn)化為json字符串時(shí)報(bào)無(wú)法序列化的問(wèn)題,感興趣的朋友一起看看吧2024-01-01
Layui組件Table綁定行點(diǎn)擊事件和獲取行數(shù)據(jù)的方法
今天小編就為大家分享一篇Layui組件Table綁定行點(diǎn)擊事件和獲取行數(shù)據(jù)的方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-08-08
js實(shí)現(xiàn)橫向伸展開的二級(jí)導(dǎo)航菜單代碼
這篇文章主要介紹了js實(shí)現(xiàn)橫向伸展開的二級(jí)導(dǎo)航菜單代碼,涉及javascript鼠標(biāo)事件及頁(yè)面元素遍歷的相關(guān)技巧,需要的朋友可以參考下2015-08-08
基于jquery插件實(shí)現(xiàn)常見(jiàn)的幻燈片效果
使用幻燈片效果的網(wǎng)站目前很普遍，本以為很復(fù)雜，實(shí)現(xiàn)起來(lái)卻發(fā)現(xiàn)很簡(jiǎn)單，現(xiàn)成的jquery插件jquery.KinSlideshow.js便可實(shí)現(xiàn)幻燈片效果2013-11-11
Bootstrap每天必學(xué)之標(biāo)簽與徽章
Bootstrap每天必學(xué)之標(biāo)簽與徽章，對(duì)Bootstrap標(biāo)簽與徽章小編也了解的很少，希望通過(guò)這篇文章和大家更多的去學(xué)習(xí)Bootstrap標(biāo)簽與徽章，從中得到收獲。2015-11-11
一般來(lái)說(shuō)，顯示在最前面的窗口都是因?yàn)榇翱诒患せ瞰@得焦點(diǎn)，要使窗口永遠(yuǎn)顯示在最前面，可以人為的設(shè)置窗口在blur時(shí)立刻focus，或者用模式、無(wú)模式對(duì)話框?qū)崿F(xiàn)2013-07-07
微信小程序?qū)崿F(xiàn)滾動(dòng)加載更多的代碼
這篇文章通過(guò)實(shí)例代碼給大家介紹了微信小程序?qū)崿F(xiàn)滾動(dòng)加載更多，給大家提供了完整代碼,需要的朋友可以參考下2019-12-12
這篇文章主要介紹了JavaScript中消除閉包的一般方法介紹,本文直接給出了操作示例,需要的朋友可以參考下2015-03-03
JavaScript登錄驗(yàn)證碼的實(shí)現(xiàn)
驗(yàn)證碼功能真的無(wú)處不在，為了提高網(wǎng)站的安全性，驗(yàn)證碼功能是必要的環(huán)節(jié)，今天小編通過(guò)本文給大家分享js登錄驗(yàn)證碼的實(shí)現(xiàn)，感興趣的朋友跟著小編一起學(xué)習(xí)吧2016-10-10