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 相关文章推荐
使用prototype.js进行异步操作
Feb 07 Javascript
js String对象中常用方法小结(字符串操作)
Jan 27 Javascript
Java/JS获取flash高宽的具体方法
Dec 27 Javascript
JQuery获取与设置HTML元素的内容或文本的实现代码
Jun 20 Javascript
javascript学习笔记(四)function函数部分
Sep 30 Javascript
Javascript基础教程之break和continue语句
Jan 18 Javascript
javascript中sort() 方法使用详解
Aug 30 Javascript
浅谈JS中的bind方法与函数柯里化
Aug 10 Javascript
删除table表格行的实例讲解
Sep 21 Javascript
vue.js element-ui tree树形控件改iview的方法
Mar 29 Javascript
Vue 理解之白话 getter/setter详解
Apr 16 Javascript
VUE项目中加载已保存的笔记实例方法
Sep 14 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
thinkPHP框架可添加js事件的分页类customPage.class.php完整实例
2017/03/16 PHP
thinkphp ajaxfileupload实现异步上传图片的示例
2017/08/28 PHP
用函数式编程技术编写优美的 JavaScript_ibm
2008/05/16 Javascript
基于JQuery 选择器使用说明介绍
2013/04/18 Javascript
Node.js中对通用模块的封装方法
2014/06/06 Javascript
两种方法实现在HTML页面加载完毕后运行某个js
2014/06/16 Javascript
理解jQuery stop()方法
2014/11/21 Javascript
JS简单实现动画弹出层效果
2015/05/05 Javascript
jQuery实现图片渐入渐出切换展示效果
2015/08/15 Javascript
jQuery鼠标事件汇总
2015/08/30 Javascript
js滚动条平滑移动示例代码
2016/03/29 Javascript
jQuery实现选项联动轮播效果【附实例】
2016/04/19 Javascript
使用JavaScript实现弹出层效果的简单实例
2016/05/31 Javascript
js 弹出对话框(遮罩)透明,可拖动的简单实例
2016/07/11 Javascript
原生js代码实现图片放大境效果
2016/10/30 Javascript
zTree异步加载展开第一级节点的实现方法
2017/09/05 Javascript
在vue使用clipboard.js进行一键复制文本的实现示例
2019/01/15 Javascript
Vuejs学习笔记之使用指令v-model完成表单的数据双向绑定
2019/04/29 Javascript
webpack打包优化的几个方法总结
2020/02/10 Javascript
three.js 将图片马赛克化的示例代码
2020/07/31 Javascript
[03:49]DOTA2英雄基础教程 光之守卫
2014/01/14 DOTA
python函数缺省值与引用学习笔记分享
2013/02/10 Python
使用pandas将numpy中的数组数据保存到csv文件的方法
2018/06/14 Python
python用列表生成式写嵌套循环的方法
2018/11/08 Python
对python字典过滤条件的实例详解
2019/01/22 Python
python使用matplotlib画柱状图、散点图
2019/03/18 Python
使用 Python 写一个简易的抽奖程序
2019/12/08 Python
Python爬虫爬取ts碎片视频+验证码登录功能
2021/02/22 Python
汉森批发:Hansen Wholesale
2018/05/24 全球购物
为有想象力的人提供的生活方式商店:Firebox
2018/06/04 全球购物
某公司的.net工程师面试题笔试题
2013/11/22 面试题
互联网创业计划书写作技巧攻略
2014/03/23 职场文书
球队口号
2014/06/18 职场文书
公司安全管理制度范本
2015/08/05 职场文书
Python词云的正确实现方法实例
2021/05/08 Python
IDEA中sout快捷键无效问题的解决方法
2022/07/23 Java/Android