javascript阻止浏览器后退事件防止误操作清空表单


Posted in Javascript onNovember 22, 2013

由于客户大多数是不懂电脑的大菜鸟。所以误操作比较多,有时没有选中文本框,然后不小心按了退格之后,刚刚辛苦填好的表单就什么也后退的没有了。网上查了好多资料,然后整合了一下。分享给大家。也希望酸奶姐姐来看看我的第一篇技术博客。呵呵(别介意我提到了你哦。)。废话不多说。上源码。

$(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; 
//当敲Backspace键时,事件源类型为密码或单行、多行文本的, 
//并且readonly属性为true或enabled属性为false的,则退格键失效 
var flag1=(ev.keyCode == 8 && (t=="password" || t=="text" || t=="textarea") 
&& (vReadOnly || vEnabled!=true))?true:false; 
//当敲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去调用自己写的方法。

vReadOnly = (vReadOnly == null) ? false : true;对于这段代码,原来冒号后面是vReadOnly<span style="font-family: Arial, Helvetica, sans-serif;">这个值,后来发现在我项目中它返回空,不是null于是改成了true。</span>

按照上面方法即可实现在非text,password,textare时按退格阻止浏览器后退事件,但是不会阻止在文本框有值时的退格事件。这是我的第一篇博客,希望各位多多捧场。
Javascript 相关文章推荐
JavaScript confirm选择判断
Oct 18 Javascript
JS获取键盘上任意按键的值(实例代码)
Nov 12 Javascript
给事件响应函数传参数的四种方式小结
Dec 05 Javascript
addEventListener 的用法示例介绍
May 07 Javascript
JS简单获取及显示当前时间的方法
Aug 03 Javascript
javascript创建对象的3种方法
Nov 02 Javascript
浅谈Vue的基本应用
Dec 27 Javascript
JS实现页面中所有img对象添加onclick事件及新窗口查看图片的方法
Dec 27 Javascript
JS简单生成随机数(随机密码)的方法
May 11 Javascript
Javascript实现时间倒计时效果
Jul 15 Javascript
关于JavaScript中的this指向问题总结篇
Jul 23 Javascript
vue 双向数据绑定的实现学习之监听器的实现方法
Nov 30 Javascript
js获取电脑分辨率的思路及操作
Nov 22 #Javascript
JS+CSS 制作的超级简单的下拉菜单附图
Nov 22 #Javascript
Mac/Windows下如何安装Node.js
Nov 22 #Javascript
javascript Event对象详解及使用示例
Nov 22 #Javascript
js Date概念详细介绍
Nov 22 #Javascript
页面定时刷新(1秒刷新一次)
Nov 22 #Javascript
js判断IE浏览器版本过低示例代码
Nov 22 #Javascript
You might like
转换中文日期的PHP程序
2006/10/09 PHP
PHP与Java对比学习日期时间函数
2016/07/03 PHP
php实现的pdo公共类定义与用法示例
2017/07/19 PHP
jquery imgareaselect 使用利用js与程序结合实现图片剪切
2009/07/30 Javascript
js 如何实现对数据库的增删改查
2012/11/23 Javascript
JS+DIV实现鼠标划过切换层效果的实例代码
2013/11/26 Javascript
实例讲解JQuery中this和$(this)区别
2014/12/08 Javascript
不定义JQuery插件 不要说会JQuery
2016/03/07 Javascript
基于JS实现限时抢购倒计时间表代码
2017/05/09 Javascript
node.js中express-session配置项详解
2017/05/31 Javascript
JavaScript初学者必看“new”
2017/06/12 Javascript
JS/jQuery实现超简单的Table表格添加,删除行功能示例
2019/07/31 jQuery
JS回调函数深入理解
2019/10/16 Javascript
node.js 微信开发之定时获取access_token
2020/02/07 Javascript
[01:15:44]首部DOTA2纪录片今日23时全网上映
2014/03/19 DOTA
[01:06:07]2014 DOTA2国际邀请赛中国区预选赛5.21 DT VS CIS
2014/05/22 DOTA
linux 下实现python多版本安装实践
2014/11/18 Python
Python中os.path用法分析
2015/01/15 Python
python字符串中的单双引
2017/02/16 Python
Python 安装第三方库 pip install 安装慢安装不上的解决办法
2019/06/18 Python
使用python实现离散时间傅里叶变换的方法
2019/09/02 Python
Python钉钉报警及Zabbix集成钉钉报警的示例代码
2020/08/17 Python
台湾前三大B2C购物网站:MOMO购物网
2017/04/27 全球购物
经贸日语专业个人求职信
2013/12/13 职场文书
个人素质的自我评价分享
2013/12/16 职场文书
工厂会计员职责
2014/02/06 职场文书
大学生简短的自我评价分享
2014/02/20 职场文书
酒店仓管员岗位职责
2014/04/28 职场文书
班主任个人工作反思
2014/04/28 职场文书
大学迎新标语
2014/06/26 职场文书
档案工作汇报材料
2014/08/21 职场文书
英语教育专业毕业生求职信
2014/08/28 职场文书
亚布力滑雪场导游词
2015/02/09 职场文书
爱国电影观后感
2015/06/19 职场文书
《狼牙山五壮士》教学反思
2016/02/17 职场文书
Python中的协程(Coroutine)操作模块(greenlet、gevent)
2022/05/30 Python