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 匿名函数的理解(透彻版)
Jan 28 Javascript
禁止你的左键复制实用技巧
Jan 04 Javascript
SOSO地图API使用(一)在地图上画圆实现思路与代码
Jan 15 Javascript
JavaScript按值删除数组元素的方法
Apr 24 Javascript
分享15个大家都熟知的jquery小技巧
Dec 02 Javascript
JavaScript对象数组排序函数及六个用法
Dec 23 Javascript
javascript判断回文数详解及实现代码
Feb 03 Javascript
解决微信内置浏览器返回上一页强制刷新问题方法
Feb 05 Javascript
jQuery仿IOS弹出框插件
Feb 18 Javascript
vuejs实现标签选项卡动态更改css样式的方法
May 31 Javascript
JS严格模式原理与用法实例分析
Apr 27 Javascript
使用typescript快速开发一个cli的实现示例
Dec 09 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
session在PHP大型web应用中的使用
2011/06/25 PHP
php中echo()和print()、require()和include()等易混淆函数的区别
2012/02/22 PHP
xss防御之php利用httponly防xss攻击
2014/03/21 PHP
微信支付的开发流程详解
2016/09/13 PHP
PHP实现负载均衡session共享redis缓存操作示例
2018/08/22 PHP
php微信扫码支付 php公众号支付
2019/03/24 PHP
javascript[js]获取url参数的代码
2007/10/17 Javascript
javascript JSON操作入门实例
2010/04/16 Javascript
理解Javascript_06_理解对象的创建过程
2010/10/15 Javascript
关于firefox的ElementTraversal 接口 使用说明
2010/11/11 Javascript
原生javascript和jquery判断浏览器版本等信息
2013/07/04 Javascript
js改变img标签的src属性在IE下没反应的解决方法
2013/07/23 Javascript
基于Bootstrap重置输入框内容按钮插件
2016/05/12 Javascript
详解jQuery中的isPlainObject()使用方法
2018/02/27 jQuery
微信小程序实现循环动画效果
2018/07/16 Javascript
JavaScript实现汉字转换为拼音及缩写的方法示例
2019/03/28 Javascript
JavaScript如何把两个数组对象合并过程解析
2019/10/10 Javascript
JavaScript字符串处理常见操作方法小结
2019/11/15 Javascript
JS数组reduce()方法原理及使用技巧解析
2020/07/14 Javascript
[53:20]2018DOTA2亚洲邀请赛 4.1 小组赛 A组加赛 VG vs OG
2018/04/03 DOTA
Python中的并发编程实例
2014/07/07 Python
python模块之time模块(实例讲解)
2017/09/13 Python
python实现冒泡排序算法的两种方法
2018/03/10 Python
Python3 读、写Excel文件的操作方法
2018/10/20 Python
python3.6编写的单元测试示例
2019/08/17 Python
python函数局部变量、全局变量、递归知识点总结
2019/11/15 Python
详解python破解zip文件密码的方法
2020/01/13 Python
Python爬虫入门有哪些基础知识点
2020/06/02 Python
Scrapy框架介绍之Puppeteer渲染的使用
2020/06/19 Python
python脚本和网页有何区别
2020/07/02 Python
应聘医学检验人员自荐信
2013/09/27 职场文书
幼师自荐信
2013/10/26 职场文书
后勤主管岗位职责
2014/03/01 职场文书
计算机科学与技术专业求职信
2014/09/03 职场文书
文员岗位职责
2015/02/04 职场文书
python 批量压缩图片的脚本
2021/06/02 Python