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实现关联数据(Linked Data)查询及注意细节
Feb 22 Javascript
网站内容禁止复制和粘贴、另存为的js代码
Feb 26 Javascript
jquery 表格排序、实时搜索表格内容(附图)
May 19 Javascript
JQuery表格拖动调整列宽效果(自己动手写的)
Sep 01 Javascript
JavaScript性能优化之小知识总结
Nov 20 Javascript
jQuery内存泄露解决办法
Dec 13 Javascript
js获取地址栏中传递的参数(两种方法)
Feb 08 Javascript
微信小程序 循环及嵌套循环的使用总结
Sep 26 Javascript
微信小程序异步处理详解
Nov 10 Javascript
如何用Node写页面爬虫的工具集
Oct 26 Javascript
javascript操作元素的常见方法小结
Nov 13 Javascript
简单聊聊Vue中的计算属性和属性侦听
Oct 05 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下用cookie统计用户访问网页次数的代码
2010/05/09 PHP
PHP批量检测并去除文件BOM头代码实例
2014/05/08 PHP
php实现留言板功能
2017/03/05 PHP
基于swoole实现多人聊天室
2018/06/14 PHP
PHP微商城开源代码实例
2019/03/27 PHP
Laravel创建数据库表结构的例子
2019/10/09 PHP
javascript getElementsByName()的用法说明
2009/07/31 Javascript
js 延迟加载 改变JS的位置加快网页加载速度
2012/12/11 Javascript
jquery mobile事件多次绑定示例代码
2013/09/13 Javascript
JS实现自适应高度表单文本框的方法
2015/02/25 Javascript
用javascript实现自动输出网页文本
2015/07/30 Javascript
js中的内部属性与delete操作符介绍
2015/08/10 Javascript
js实现的在线调色板功能完整实例
2016/12/21 Javascript
vue2.0嵌套路由实现豆瓣电影分页功能(附demo)
2017/03/13 Javascript
微信小程序页面传值实例分析
2017/04/19 Javascript
jQuery实现的事件绑定功能基本示例
2017/10/11 jQuery
JavaScript 异步调用
2017/10/25 Javascript
vue axios数据请求get、post方法及实例详解
2018/09/11 Javascript
vue-cli 首屏加载优化问题
2018/11/06 Javascript
[01:29]2017 DOTA2国际邀请赛官方英雄手办展示
2017/03/18 DOTA
[02:42]岂曰无衣,与子同袍!DOTA2致敬每一位守护人
2020/02/17 DOTA
Python 的描述符 descriptor详解
2016/02/27 Python
两个命令把 Vim 打造成 Python IDE的方法
2016/03/20 Python
浅谈python标准库--functools.partial
2019/03/13 Python
django 自定义过滤器(filter)处理较为复杂的变量方法
2019/08/12 Python
python实现在内存中读写str和二进制数据代码
2020/04/24 Python
python中def是做什么的
2020/06/10 Python
aec加密 php_php aes加密解密类(兼容php5、php7)
2021/03/14 PHP
全球最大的跑步用品商店:Road Runner Sports
2016/09/11 全球购物
阿根廷票务网站:StubHub阿根廷
2018/04/13 全球购物
校园新闻广播稿
2014/01/10 职场文书
户籍证明模板
2014/09/28 职场文书
学校党的群众路线教育实践活动制度建设计划
2014/11/03 职场文书
思想品德评语大全
2014/12/31 职场文书
社区节水倡议书
2015/04/29 职场文书
劳动保障事务所个人工作总结
2015/08/12 职场文书