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 相关文章推荐
在html页面上拖放移动标签
Jan 08 Javascript
js为数字添加逗号并格式化数字的代码
Aug 23 Javascript
Jquery操作js数组及对象示例代码
May 11 Javascript
jquery操作复选框checkbox的方法汇总
Feb 05 Javascript
Javascript中prototype属性实现给内置对象添加新的方法
May 14 Javascript
浅谈JavaScript中的Math.atan()方法的使用
Jun 14 Javascript
jquery延迟对象解析
Oct 26 Javascript
基于JavaScript实现带缩略图的轮播效果
Jan 12 Javascript
angular 用拦截器统一处理http请求和响应的方法
Jun 08 Javascript
js实现Tab选项卡切换效果
Jul 17 Javascript
vue中img src 动态加载本地json的图片路径写法
Apr 25 Javascript
vue实现路由切换改变title功能
May 28 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 编写的 25个游戏脚本
2009/05/11 PHP
PHP删除HTMl标签的三种解决方法
2013/06/30 PHP
php实现的太平洋时间和北京时间互转的自定义函数分享
2014/08/19 PHP
全面了解PHP中的全局变量
2016/06/17 PHP
php版阿里云OSS图片上传类详解
2016/12/01 PHP
JS 用6N±1法求素数 实例教程
2009/10/20 Javascript
可以用来调试JavaScript错误的解决方案
2010/08/07 Javascript
jQuery EasyUI API 中文文档 搜索框
2011/09/29 Javascript
使用apply方法处理数组的三个技巧[译]
2012/09/20 Javascript
extjs3 combobox取value和text案例详解
2013/02/06 Javascript
在jQuery中 常用的选择器介绍
2013/04/16 Javascript
javascript中的onkeyup和onkeydown区别介绍
2013/04/28 Javascript
JavaScript String 对象常用方法总结
2016/04/28 Javascript
jQuery手指滑动轮播效果
2016/12/22 Javascript
vue-router 中router-view不能渲染的解决方法
2017/05/23 Javascript
NodeJS简单实现WebSocket功能示例
2018/02/10 NodeJs
使用vue2实现带地区编号和名称的省市县三级联动效果
2018/11/05 Javascript
浅谈python脚本设置运行参数的方法
2018/12/03 Python
利用python和百度地图API实现数据地图标注的方法
2019/05/13 Python
在Python中构建增广矩阵的实现方法
2019/07/01 Python
Python 图像对比度增强的几种方法(小结)
2019/09/25 Python
详解Python直接赋值,深拷贝和浅拷贝
2020/07/09 Python
基于HTML5的WebGL经典3D虚拟机房漫游动画
2017/11/15 HTML / CSS
摩托车和ATV零件、配件和服装的首选在线零售商:MotoSport
2017/12/22 全球购物
加拿大休闲和工业服装和鞋类零售商:L’Équipeur
2018/01/12 全球购物
100%有机精油,美容油:House of Pure Essence
2018/10/30 全球购物
美国最大和最受信任的二手轮胎商店:Bestusedtires.com
2020/06/02 全球购物
杭州联环马网络笔试题面试题
2013/08/04 面试题
怎样声明一个匿名的内部类
2016/06/01 面试题
先进教师个人事迹材料
2014/12/15 职场文书
婚礼家长致辞
2015/07/27 职场文书
公司考勤管理制度
2015/08/04 职场文书
百年校庆宣传标语口号
2015/12/26 职场文书
《包身工》教学反思
2016/02/23 职场文书
Nginx Rewrite使用场景及配置方法解析
2021/04/01 Servers
MySQL系列之七 MySQL存储引擎
2021/07/02 MySQL