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 相关文章推荐
基于jquery的一行代码轻松实现拖动效果
Dec 28 Javascript
查看图片(前进后退)功能实现js代码
Apr 24 Javascript
javascript生成随机大小写字母的方法
Feb 20 Javascript
JQuery实现table行折叠效果以JSON做数据源
May 26 Javascript
JS实现两表格里数据来回转移的方法
May 28 Javascript
关注jquery技巧提高jquery技能(前端开发必学)
Nov 02 Javascript
jQuery简单注册和禁用全局事件的方法
Jul 25 Javascript
利用jQuery实现简单的拖曳效果实例代码
Oct 20 jQuery
p5.js实现斐波那契螺旋的示例代码
Mar 22 Javascript
layui多图上传实现删除功能的例子
Sep 23 Javascript
JS函数基本定义与用法示例
Jan 15 Javascript
JS 获取文件后缀,判断文件类型(比如是否为图片格式)
May 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
PHP写MySQL数据 实现代码
2009/06/15 PHP
分享一下贝贝成长进度的php代码
2012/09/14 PHP
thinkphp3.0 模板中函数的使用
2012/11/13 PHP
叫你如何修改Nginx与PHP的文件上传大小限制
2014/09/10 PHP
PHP7内核CGI与FastCGI详解
2019/04/14 PHP
理解Javascript_03_javascript全局观
2010/10/11 Javascript
基于JavaScript 类的使用详解
2013/05/07 Javascript
jQuery实现鼠标经过弹出提示信息的地图热点效果
2015/08/07 Javascript
用NodeJS实现批量查询地理位置的经纬度接口
2016/08/16 NodeJs
linux 后台运行node服务指令方法
2018/05/23 Javascript
微信小程序onLaunch异步,首页onLoad先执行?
2018/09/20 Javascript
Vue.js子组件向父组件通信的方法实例代码详解
2018/12/10 Javascript
vue项目打包之后背景样式丢失的解决方案
2019/01/17 Javascript
帮你彻底搞懂JS中的prototype、__proto__与constructor(图解)
2019/08/23 Javascript
解决layer图标icon不加载的问题
2019/09/04 Javascript
vuex实现像调用模板方法一样调用Mutations方法
2019/11/06 Javascript
Node.js API详解之 os模块用法实例分析
2020/05/06 Javascript
基于vuex实现购物车功能
2021/01/10 Vue.js
Python Socket传输文件示例
2017/01/16 Python
使用python实现接口的方法
2017/07/07 Python
Centos 升级到python3后pip 无法使用的解决方法
2018/06/12 Python
Python3中内置类型bytes和str用法及byte和string之间各种编码转换 问题
2018/09/27 Python
浅谈python的深浅拷贝以及fromkeys的用法
2019/03/08 Python
Python这样操作能存储100多万行的xlsx文件
2019/04/16 Python
Django REST 异常处理详解
2020/07/15 Python
印度尼西亚综合购物网站:Lazada印尼
2016/09/07 全球购物
巴西24小时在线药房:Drogasil
2020/06/20 全球购物
社团成立邀请函
2014/01/08 职场文书
小学生期末自我鉴定
2014/01/19 职场文书
采购部部长岗位职责
2014/02/06 职场文书
教师通用专业自荐书范文
2014/02/11 职场文书
楼面经理岗位职责范本
2014/02/18 职场文书
2014年党员公开承诺践诺书
2014/03/25 职场文书
办公室文员岗位职责范本
2014/06/12 职场文书
2015年大班保育员工作总结
2015/05/18 职场文书
2016公务员年度考核评语
2015/12/01 职场文书