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 var变量隐式声明方法
Oct 19 Javascript
jQuery Validation插件remote验证方式的Bug解决
Jul 01 Javascript
jQuery中height()方法用法实例
Dec 24 Javascript
jquery背景跟随鼠标滑动导航
Nov 20 Javascript
创建自己的jquery表格插件
Nov 25 Javascript
Vue的elementUI实现自定义主题方法
Feb 23 Javascript
vue-cli下的vuex的简单Demo图解(实现加1减1操作)
Feb 26 Javascript
jQuery表单选择器用法详解
Aug 22 jQuery
Vue CLI4 Vue.config.js标准配置(最全注释)
Jun 05 Javascript
vue 解决provide和inject响应的问题
Nov 12 Javascript
微信小程序实现倒计时功能
Nov 19 Javascript
Node.js文本文件BOM头的去除方法
Nov 22 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 flock 文件锁详细介绍
2012/12/29 PHP
做了CDN获取用户真实IP的函数代码(PHP与Asp设置方式)
2013/04/13 PHP
ThinkPHP连接数据库及主从数据库的设置教程
2014/08/22 PHP
JQuery中阻止事件冒泡几种方式及其区别介绍
2014/01/15 Javascript
sails框架的学习指南
2014/12/22 Javascript
原生js实现数字字母混合验证码的简单实例
2015/12/10 Javascript
基于jquery实现鼠标左右拖动滑块滑动附源码下载
2015/12/23 Javascript
JavaScript事件类型中焦点、鼠标和滚轮事件详解
2016/01/25 Javascript
jquery插件jquery.dragscale.js实现拖拽改变元素大小的方法(附demo源码下载)
2016/02/25 Javascript
jQuery实现智能判断固定导航条或侧边栏的方法
2016/09/04 Javascript
JQuery中解决重复动画的方法
2016/10/17 Javascript
基于Vue如何封装分页组件
2016/12/16 Javascript
JS将时间秒转换成天小时分钟秒的字符串
2019/07/10 Javascript
Vue中对iframe实现keep alive无刷新的方法
2019/07/23 Javascript
js实现开关灯效果
2020/03/30 Javascript
JS图片懒加载的优点及实现原理
2020/01/10 Javascript
[03:14]2014DOTA2西雅图国际邀请赛 EG战队巡礼
2014/07/07 DOTA
[00:15]TI9地铁玩家打卡
2019/08/11 DOTA
python实现对一个完整url进行分割的方法
2015/04/29 Python
利用python打印出菱形、三角形以及矩形的方法实例
2017/08/08 Python
通过python爬虫赚钱的方法
2019/01/29 Python
Python基于滑动平均思想实现缺失数据填充的方法
2019/02/21 Python
PySide和PyQt加载ui文件的两种方法
2019/02/27 Python
Python 一键获取百度网盘提取码的方法
2019/08/01 Python
python 模拟银行转账功能过程详解
2019/08/06 Python
Python: tkinter窗口屏幕居中,设置窗口最大,最小尺寸实例
2020/03/04 Python
Python 实现打印单词的菱形字符图案
2020/04/12 Python
Python偏函数实现原理及应用
2020/11/20 Python
CSS3 text shadow字体阴影效果
2016/01/08 HTML / CSS
HTML5中的音频和视频媒体播放元素小结
2016/01/29 HTML / CSS
详解如何解决H5开发使用wx.hideMenuItems无效果不生效
2021/01/20 HTML / CSS
党的群众路线教育实践活动对照检查材料范文
2014/09/24 职场文书
用Python进行栅格数据的分区统计和批量提取
2021/05/27 Python
Go语言设计模式之结构型模式
2021/06/22 Golang
Python GUI编程之tkinter 关于 ttkbootstrap 的使用详解
2022/03/03 Python
MySQL的意向共享锁、意向排它锁和死锁
2022/07/15 MySQL