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 相关文章推荐
又一个图片自动缩小的JS代码
Mar 10 Javascript
JQuery 操作Javascript对象和数组的工具函数小结
Jan 22 Javascript
jQuery的初始化与对象构建之浅析
Apr 12 Javascript
javascript去掉前后空格的实例
Nov 07 Javascript
JavaScript实现计算字符串中出现次数最多的字符和出现的次数
Mar 12 Javascript
BootStrap表单宽度设置方法
Mar 10 Javascript
bootstrap警告框示例代码分享
May 17 Javascript
angularjs中ng-bind-html的用法总结
May 23 Javascript
vue主动刷新页面及列表数据删除后的刷新实例
Sep 16 Javascript
JS中超越现实的匿名函数用法实例分析
Jun 21 Javascript
小程序表单认证布局及验证详解
Jun 19 Javascript
微信小程序实现点击导航条切换页面
Nov 19 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
javascript实现上传图片并预览的效果实现代码
2011/04/11 Javascript
基于jquery的bankInput银行卡账号格式化
2012/08/22 Javascript
JavaScript中json使用自己总结
2013/08/13 Javascript
JavaScript实现url地址自动检测并添加URL链接示例代码
2013/11/12 Javascript
用js将内容复制到剪贴板兼容浏览器
2014/03/18 Javascript
Boostrap入门准备之border box
2016/05/09 Javascript
jQuery实现的分页功能示例
2017/01/22 Javascript
js 获取html5的data属性实现方法
2017/07/28 Javascript
jQuery封装animate.css的实例
2018/01/04 jQuery
Vue项目中添加锁屏功能实现思路
2018/06/29 Javascript
koa2 从入门到精通(小结)
2019/07/23 Javascript
Vue中import from的来源及省略后缀与加载文件夹问题
2020/02/09 Javascript
京东优选小程序的实现代码示例
2020/02/25 Javascript
javascript中contains是否包含功能实现代码(扩展字符、数组、dom)
2020/04/07 Javascript
vue中el-input绑定键盘按键(按键修饰符)
2020/07/22 Javascript
微信小程序wx.getUserInfo授权获取用户信息(头像、昵称)的实现
2020/08/19 Javascript
详解Python网络爬虫功能的基本写法
2016/01/28 Python
Python操作RabbitMQ服务器实现消息队列的路由功能
2016/06/29 Python
Python中字典的setdefault()方法教程
2017/02/07 Python
Python使用openpyxl读写excel文件的方法
2017/06/30 Python
Python3连接SQLServer、Oracle、MySql的方法
2018/06/28 Python
python实现决策树分类
2018/08/30 Python
windows下cx_Freeze生成Python可执行程序的详细步骤
2018/10/09 Python
Python配置虚拟环境图文步骤
2019/05/20 Python
numpy矩阵数值太多不能全部显示的解决
2020/05/14 Python
Python网络爬虫四大选择器用法原理总结
2020/06/01 Python
Python图像读写方法对比
2020/11/16 Python
html5 canvas简单封装一个echarts实现不了的饼图
2018/06/12 HTML / CSS
小程序canvas中文字设置居中锚点
2019/04/16 HTML / CSS
全球最大的在线旅游公司:Expedia
2017/11/16 全球购物
宣传活动总结范文
2014/07/01 职场文书
寒暑假实习证明书模板
2014/11/29 职场文书
房产公证书
2015/01/23 职场文书
工程合作意向书范本
2015/05/09 职场文书
解决mysql问题:由于找不到MSVCR120.dll,无法继续执行代码
2021/06/26 MySQL
redis requires ruby version2.2.2的解决方案
2021/07/15 Redis