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面向对象之Javascript 继承
May 04 Javascript
JavaScript之编码规范 推荐
May 23 Javascript
js处理json以及字符串的比较等常用操作
Sep 08 Javascript
javaScript array(数组)使用字符串作为数组下标的方法
Nov 19 Javascript
解决js图片加载时出现404的问题
Nov 30 Javascript
纯JS代码实现隔行变色鼠标移入高亮
Nov 23 Javascript
浅谈js停止事件冒泡 阻止浏览器的默认行为(阻止超连接 #)
Feb 08 Javascript
详解vue组件化开发-vuex状态管理库
Apr 10 Javascript
JavaScript变量作用域_动力节点Java学院整理
Jun 27 Javascript
H5实现仿flash效果的实现代码
Sep 29 Javascript
JS实现区分中英文并统计字符个数的方法示例
Jun 09 Javascript
Vue学习之组件用法实例详解
Jan 06 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
关于Intype一些小问题的解决办法
2008/03/28 PHP
php守护进程 加linux命令nohup实现任务每秒执行一次
2011/07/04 PHP
ThinkPHP自动填充实现无限级分类的方法
2014/08/22 PHP
用于判断用户注册时,密码强度的JS代码
2009/01/01 Javascript
jquery 年会抽奖程序
2011/12/22 Javascript
Javascript判断文件是否存在(客户端/服务器端)
2014/09/16 Javascript
jquery中animate的stop()方法作用实例分析
2015/01/30 Javascript
jQuery实现简单的日期输入格式化控件
2015/03/12 Javascript
Javascript实现div的toggle效果实例分析
2015/06/09 Javascript
JS实现仿QQ效果的三级竖向菜单
2015/09/25 Javascript
jQuery中的siblings用法实例分析
2015/12/24 Javascript
举例讲解如何判断JavaScript中对象的类型
2016/04/22 Javascript
javascript封装addLoadEvent实现页面同时加载执行多个函数的方法
2016/07/25 Javascript
在Web项目中引入Jquery插件报错的完美解决方案(图解)
2016/09/19 Javascript
微信小程序 网络请求(GET请求)详解
2016/11/16 Javascript
微信小程序左右滑动切换页面详解及实例代码
2017/02/28 Javascript
EasyUI框架 使用Ajax提交注册信息的实现代码
2017/09/27 Javascript
微信小程序实现动态改变view标签宽度和高度的方法【附demo源码下载】
2017/12/05 Javascript
vue+axios+promise实际开发用法详解
2018/10/15 Javascript
微信小程序 scroll-view 水平滚动实现过程解析
2019/10/12 Javascript
uni-app如何页面传参数的几种方法总结
2020/04/28 Javascript
[02:16]DOTA2英雄基础教程 干扰者
2014/01/15 DOTA
Python内置数据结构与操作符的练习题集锦
2016/07/01 Python
Python使用pymongo模块操作MongoDB的方法示例
2018/07/20 Python
Python 绘制酷炫的三维图步骤详解
2019/07/12 Python
简单了解python PEP的一些知识
2019/07/13 Python
django的聚合函数和aggregate、annotate方法使用详解
2019/07/23 Python
python3.6中@property装饰器的使用方法示例
2019/08/17 Python
Camille Jewelry官网:现代女性时尚首饰
2019/07/07 全球购物
秋天的怀念教学反思
2014/04/28 职场文书
2015年党支部公开承诺书
2015/01/22 职场文书
锅炉工岗位职责
2015/02/13 职场文书
军训阅兵新闻稿
2015/07/17 职场文书
2016年感恩教师节校园广播稿
2015/12/18 职场文书
业余无线电通联Q语
2022/02/18 无线电
Python基本的内置数据类型及使用方法
2022/04/13 Python