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随机排序(随即出牌)
Sep 17 Javascript
用jquery实现的模拟QQ邮箱里的收件人选取及其他效果(一)
Jan 06 Javascript
JS实现清除指定cookies的方法
Sep 20 Javascript
JavaScript判断undefined类型的正确方法
Jun 30 Javascript
javascript事件绑定学习要点
Mar 09 Javascript
深入理解jquery自定义动画animate()
May 24 Javascript
js实现右键自定义菜单
Dec 03 Javascript
jquery hover 不停闪动问题的解决方法(亦为stop()的使用)
Feb 10 Javascript
Vue项目中引入外部文件的方法(css、js、less)
Jul 24 Javascript
node+express+ejs使用模版引擎做的一个示例demo
Sep 18 Javascript
详细分析vue表单数据的绑定
Jul 20 Javascript
微信小程序实现可长按移动控件
Nov 01 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表单重复提交实现方法
2015/09/29 PHP
Yii2――使用数据库操作汇总(增删查改、事务)
2016/12/19 PHP
详解Yii2 定制表单输入字段的标签和样式
2017/01/04 PHP
PHP实现权限管理功能示例
2017/09/22 PHP
javascript动画效果类封装代码
2007/08/28 Javascript
jQuery实现动画效果的简单实例
2014/01/27 Javascript
简单的js图片轮换代码(js图片轮播)
2014/05/06 Javascript
window.setInterval()方法的定义和用法及offsetLeft与style.left的区别
2015/11/11 Javascript
Jquery插件之Fancybox丰富的弹出层效果附源码下载
2015/12/02 Javascript
java必学必会之static关键字
2015/12/03 Javascript
深入浅析react native es6语法
2015/12/09 Javascript
jQuery简单设置文本框回车事件的方法
2016/08/01 Javascript
AngularJS中的JSONP实例解析
2016/12/01 Javascript
js仿新浪微博消息发布功能
2017/02/17 Javascript
非常实用的vue导航钩子
2017/03/20 Javascript
微信小程序联网请求的轮播图
2017/07/07 Javascript
BootStrap自定义popover,点击区域隐藏功能的实现
2018/01/23 Javascript
javascript实现小型区块链功能
2019/04/03 Javascript
ES6模板字符串和标签模板的应用实例分析
2019/06/25 Javascript
BootStrap前端框架使用方法详解
2020/02/26 Javascript
javascript 易错知识点实例小结
2020/04/25 Javascript
vue 子组件和父组件传值的示例
2020/09/11 Javascript
使用Python实现下载网易云音乐的高清MV
2015/03/16 Python
python之DataFrame实现excel合并单元格
2021/02/22 Python
Python使用mongodb保存爬取豆瓣电影的数据过程解析
2019/08/14 Python
Python3 文章标题关键字提取的例子
2019/08/26 Python
python中通过selenium简单操作及元素定位知识点总结
2019/09/10 Python
Jupyter 无法下载文件夹如何实现曲线救国
2020/04/22 Python
20行Python代码实现一款永久免费PDF编辑工具的实现
2020/08/27 Python
StubHub哥伦比亚:购买和出售您的门票
2016/10/20 全球购物
NIHAOMARKET官方海外旗舰店:意大利你好华人超市
2018/01/27 全球购物
Java文件和目录(IO)操作
2014/08/26 面试题
金融专业个人求职信
2013/09/22 职场文书
舞蹈专业大学生职业规划范文
2014/03/12 职场文书
防火标语大全
2014/10/06 职场文书
2015新学期校长寄语(3篇)
2015/03/25 职场文书