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 相关文章推荐
强悍无比的WEB开发好助手FireBug(Firefox Plugin)
Jan 16 Javascript
表单元素的submit()方法和onsubmit事件应用概述
Feb 01 Javascript
javascript分页代码实例分享(js分页)
Dec 13 Javascript
JS实现网站菜单拖拽移位效果的方法
Sep 24 Javascript
使用堆实现Top K算法(JS实现)
Dec 25 Javascript
vue组件实例解析
Jan 10 Javascript
jQuery插件autocomplete使用详解
Feb 04 Javascript
详解AngularJS2 Http服务
Jun 26 Javascript
基于vue cli重构多页面脚手架过程详解
Jan 23 Javascript
JS div匀速移动动画与变速移动动画代码实例
Mar 26 Javascript
javascript关于“时间”的一次探索
Jul 24 Javascript
Vue打包部署到Nginx时,css样式不生效的解决方式
Aug 03 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作的文本留言本的例子(二)
2006/10/09 PHP
PHP Memcached + APC + 文件缓存封装实现代码
2010/03/11 PHP
总结PHP中DateTime的常用方法
2016/08/11 PHP
php将字符串转换为数组实例讲解
2020/05/05 PHP
一个简单的Ext.XTemplate的实例代码
2012/03/18 Javascript
VUEJS实战之构建基础并渲染出列表(1)
2016/06/13 Javascript
Nodejs进阶:基于express+multer的文件上传实例
2016/11/21 NodeJs
微信小程序 天气预报开发实例代码源码
2017/01/20 Javascript
浅谈js中function的参数默认值
2017/02/20 Javascript
Angular Renderer (渲染器)的具体使用
2018/05/03 Javascript
JavaScript解析及序列化JSON的方法实例分析
2019/01/04 Javascript
基于javascript实现放大镜特效
2020/12/03 Javascript
[04:22]DOTA2上海特级锦标赛主赛事第四日TOP10
2016/03/06 DOTA
[51:53]完美世界DOTA2联赛决赛日 Inki vs LBZS 第二场 11.08
2020/11/10 DOTA
Python tkinter模块弹出窗口及传值回到主窗口操作详解
2017/07/28 Python
通过Pandas读取大文件的实例
2018/06/07 Python
解决pyinstaller打包exe文件出现命令窗口一闪而过的问题
2018/10/31 Python
删除DataFrame中值全为NaN或者包含有NaN的列或行方法
2018/11/06 Python
Python Django给admin添加Action的方法实例详解
2019/04/29 Python
解决py2exe打包后,总是多显示一个DOS黑色窗口的问题
2019/06/21 Python
python中tkinter的应用:修改字体的实例讲解
2019/07/17 Python
matplotlib命令与格式之tick坐标轴日期格式(设置日期主副刻度)
2019/08/06 Python
canvas实现按住鼠标移动绘制出轨迹的示例代码
2018/02/05 HTML / CSS
前端实现打印图像功能
2019/08/27 HTML / CSS
html5 横向滑动导航栏的方法示例
2020/05/08 HTML / CSS
关于Java String的一道面试题
2013/09/29 面试题
便利店投资创业计划书
2014/02/08 职场文书
致共产党员倡议书
2014/04/16 职场文书
大学运动会加油稿200字(5篇)
2014/09/27 职场文书
幼儿教师师德师风自我剖析材料
2014/09/29 职场文书
质量整改通知单
2015/04/21 职场文书
建筑工程催款函
2015/06/24 职场文书
回复函格式及范文
2015/07/14 职场文书
2015年中秋放假通知范文
2015/08/18 职场文书
用python自动生成日历
2021/04/24 Python