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 相关文章推荐
js 金额格式化来回转换示例
Feb 23 Javascript
js函数内变量的作用域分析
Jan 12 Javascript
jquery插件splitScren实现页面分屏切换模板特效
Jun 16 Javascript
js删除局部变量的实现方法
Jun 25 Javascript
js两种拼接字符串的简单方法(必看)
Sep 02 Javascript
详解JavaScript中数组的reduce方法
Dec 02 Javascript
for循环 + setTimeout 结合一些示例(前端面试题)
Aug 30 Javascript
原生js实现仿window10系统日历效果的实例
Oct 31 Javascript
浅谈vue项目如何打包扔向服务器
May 08 Javascript
在vue中使用express-mock搭建mock服务的方法
Nov 07 Javascript
antd Upload 文件上传的示例代码
Dec 14 Javascript
微信小程序实现页面分享onShareAppMessage
Aug 12 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个人网站架设连环讲(三)
2006/10/09 PHP
PHP连接MySQL的2种方法小结以及防止乱码
2014/03/11 PHP
php+xml实现在线英文词典查询的方法
2015/01/23 PHP
浅谈PHP检查数组中是否存在某个值 in_array 函数
2016/06/13 PHP
微信支付开发发货通知实例
2016/07/12 PHP
php 查找数组元素提高效率的方法详解
2017/05/05 PHP
laravel框架模型中非静态方法也能静态调用的原理分析
2019/11/23 PHP
详解new function(){}和function(){}() 区别分析
2008/03/22 Javascript
IE FF OPERA都可用的弹出层实现代码
2009/09/29 Javascript
ExtJS TabPanel beforeremove beforeclose使用说明
2010/03/31 Javascript
jquery获取div宽度的实现思路与代码
2013/01/13 Javascript
javascript中负数算术右移、逻辑右移的奥秘探索
2013/10/17 Javascript
Jquery遍历节点的方法小集
2014/01/22 Javascript
js改变embed标签src值的方法
2015/04/10 Javascript
javascript使用输出语句实现网页特效代码
2015/08/06 Javascript
javascript this详细介绍
2016/09/19 Javascript
微信小程序 wx.request(OBJECT)发起请求详解
2016/10/13 Javascript
jQuery 出现Cannot read property ‘msie’ of undefined错误的解决方法
2016/11/23 Javascript
简单实现JS计算器功能
2016/12/21 Javascript
使用socket.io实现简单聊天室案例
2018/01/02 Javascript
JS实现图片转换成base64的各种应用场景实例分析
2018/06/22 Javascript
浅谈redux, koa, express 中间件实现对比解析
2019/05/23 Javascript
微信小程序 导入图标实现过程详解
2019/10/11 Javascript
Python sys.path详细介绍
2013/10/17 Python
Linux中安装Python的交互式解释器IPython的教程
2016/06/13 Python
Python操作SQLite数据库的方法详解
2017/06/16 Python
python 寻找list中最大元素对应的索引方法
2018/06/28 Python
使用Pycharm(Python工具)新建项目及创建Python文件的教程
2020/04/26 Python
美国摄影爱好者购物网站:Focus Camera
2016/10/21 全球购物
火车来了教学反思
2014/02/11 职场文书
高中生评语大全
2014/04/25 职场文书
教师节学生演讲稿
2014/09/03 职场文书
公司财务人员岗位职责
2015/04/14 职场文书
JS中一些高效的魔法运算符总结
2021/05/06 Javascript
Python可视化学习之seaborn调色盘
2022/02/24 Python
Python Matplotlib绘制等高线图与渐变色扇形图
2022/04/14 Python