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函数绑定
Aug 18 Javascript
javascript 用函数语句和表达式定义函数的区别详解
Jan 06 Javascript
JavaScript 里的类数组对象
Apr 08 Javascript
js实现选中页面文字将其分享到新浪微博
Nov 05 Javascript
JS实现放大、缩小及拖拽图片的方法【可兼容IE、火狐】
Aug 23 Javascript
jQuery中delegate()方法的用法详解
Oct 13 Javascript
jQuery实现导航高亮的方法【附demo源码下载】
Nov 09 Javascript
React中ES5与ES6写法的区别总结
Apr 21 Javascript
vuex actions异步修改状态的实例详解
Nov 06 Javascript
nuxt+axios实现打包后动态修改请求地址的方法
Apr 22 Javascript
JavaScript中的几种继承方法示例
Dec 06 Javascript
vue实现倒计时功能
Mar 24 Vue.js
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计算数组不为空元素个数的方法
2014/01/27 PHP
php检测iis环境是否支持htaccess的方法
2014/02/18 PHP
php7 新增功能实例总结
2020/05/25 PHP
一段多浏览器的&quot;复制到剪贴板&quot;javascript代码
2007/03/27 Javascript
js类中的公有变量和私有变量
2008/07/24 Javascript
基于jquery ajax 用户无刷新登录方法详解
2012/04/28 Javascript
js实现俄罗斯方块小游戏分享
2014/01/31 Javascript
js图片自动轮播代码分享(js图片轮播)
2014/05/06 Javascript
jQuery实现复选框全选/取消全选/反选及获得选择的值
2014/06/12 Javascript
javascript 回调函数详解
2014/11/11 Javascript
Highcharts 多个Y轴动态刷新数据的实现代码
2016/05/28 Javascript
Bootstrap导航条可点击和鼠标悬停显示下拉菜单
2016/11/25 Javascript
详解vue.js的事件处理器v-on:click
2017/06/27 Javascript
使用jQuery实现鼠标点击左右按钮滑动切换
2017/08/04 jQuery
node.js实现微信JS-API封装接口的示例代码
2017/09/06 Javascript
浅谈jquery fullpage 插件增加头部和版权的方法
2018/03/20 jQuery
vue elementUI tree树形控件获取父节点ID的实例
2018/09/12 Javascript
javascript/jquery实现点击触发事件的方法分析
2019/11/11 jQuery
微信小程序入门之绘制时钟
2020/10/22 Javascript
详解javascript脚本何时会被执行
2021/02/05 Javascript
python列表操作之extend和append的区别实例分析
2015/07/28 Python
python中numpy包使用教程之数组和相关操作详解
2017/07/30 Python
如何使用Python标准库进行性能测试
2019/06/25 Python
详解pandas apply 并行处理的几种方法
2021/02/24 Python
家得宝加拿大家装网上商店:The Home Depot加拿大
2016/08/27 全球购物
银行实习生的自我评价
2013/12/09 职场文书
广告词串烧
2014/03/19 职场文书
学校教研活动总结
2014/07/02 职场文书
节能环保演讲稿
2014/08/28 职场文书
励志广播稿300字(5篇)
2014/09/15 职场文书
群众路线领导班子整改方案
2014/10/25 职场文书
2015年端午节活动方案
2015/05/05 职场文书
幼儿园教师安全责任书
2015/05/08 职场文书
昆虫记读书笔记
2015/06/26 职场文书
保护动物的宣传语
2015/07/13 职场文书
mysql 排序失效
2022/05/20 MySQL