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 相关文章推荐
JSON 客户端和服务器端的格式转换
Aug 27 Javascript
jquery URL参数判断,确定菜单样式
May 31 Javascript
JQuery最佳实践之精妙的自定义事件
Aug 11 Javascript
js判断运行jsp页面的浏览器类型以及版本示例
Oct 30 Javascript
JavaScript驾驭网页-获取网页元素
Mar 24 Javascript
浅谈javascript基础之客户端事件驱动
Jun 10 Javascript
深入理解JS DOM事件机制
Aug 06 Javascript
微信小程序登录态控制深入分析
Apr 12 Javascript
ios设备中angularjs无法改变页面title的解决方法
Sep 13 Javascript
vue中的inject学习教程
Apr 24 Javascript
vue中的mescroll搜索运用及各种填坑处理
Oct 30 Javascript
vue element-ui读取pdf文件的方法
Nov 26 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/07/29 PHP
浅谈Laravel中的一个后期静态绑定
2017/08/11 PHP
PHP实现PDO操作mysql存储过程示例
2019/02/13 PHP
限制文本框输入N个字符的js代码
2010/05/13 Javascript
jquery实现手风琴效果实例代码
2013/11/15 Javascript
JavaScript实现的浮动层框架用法实例分析
2015/10/10 Javascript
javascript事件模型介绍
2016/05/31 Javascript
js中判断变量类型函数typeof的用法总结
2016/08/09 Javascript
微信小程序录音与播放录音功能
2017/12/25 Javascript
vuex如何重置所有state(可定制)
2019/01/17 Javascript
vue cli3 调用百度翻译API翻译页面的实现示例
2019/09/13 Javascript
SpringBoot+Vue开发之Login校验规则、实现登录和重置事件
2020/10/19 Javascript
jquery实现穿梭框功能
2021/01/19 jQuery
Python实现建立SSH连接的方法
2015/06/03 Python
python清除字符串里非数字字符的方法
2015/07/02 Python
Python简单生成8位随机密码的方法
2017/05/24 Python
Windows下的Python 3.6.1的下载与安装图文详解(适合32位和64位)
2018/02/21 Python
基于python的ini配置文件操作工具类
2019/04/24 Python
python实现海螺图片的方法示例
2019/05/12 Python
django中SMTP发送邮件配置详解
2019/07/19 Python
python3中关于excel追加写入格式被覆盖问题(实例代码)
2020/01/10 Python
Windows10+anacond+GPU+pytorch安装详细过程
2020/03/24 Python
解决python父线程关闭后子线程不关闭问题
2020/04/25 Python
HTML5全屏(Fullscreen)API详细介绍
2015/04/24 HTML / CSS
Ootori在线按摩椅店:一家专业的按摩椅制造商
2019/04/10 全球购物
SOA的常见陷阱或者误解是什么
2014/10/05 面试题
英文版网络工程师求职信
2013/10/28 职场文书
轻金属冶金专业毕业生自荐信
2013/11/02 职场文书
银行职员思想汇报
2013/12/31 职场文书
高三语文教学反思
2014/01/15 职场文书
年会搞笑主持词
2014/03/27 职场文书
餐饮商业计划书范文
2014/04/29 职场文书
捐款倡议书格式范文
2014/05/14 职场文书
小学生教师节演讲稿
2014/09/03 职场文书
检讨书范文2000字
2015/01/28 职场文书
优秀新员工事迹材料
2019/05/13 职场文书