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