JS禁用浏览器退格键实现思路及代码


Posted in Javascript onOctober 29, 2013

上周提交了一个项目(内部使用的),一同事提出个BUG,说要禁用退格键(backspace或者叫后退键),因为这和他的习惯不一样,担心万一文字录入一半,他按了退格键,那整个页面的内容就白填了,然后信誓旦旦的说他做的系统中后退键都是不能用的,我这个系统有问题,当时因为事多,只把这个问题记录下来了,后来查了下他以前做的项目,也没有对退格键进行处理。自己的项目都没处理,到我这嚷嚷来了,算了,不和年轻人一般见识。不就禁用个后退键,简单。

其实说禁用也不是完全禁用,后退键在各浏览器下默认为点击了一下后退按钮,只要保证正常的文字录入还可以用,其他情况下的退格键一律禁掉。看代码吧。

当键盘敲下后退键(Backspace)后
1、禁止浏览器自动后退
2、但不影响密码、单行文本、多行文本输入框等的回退操作

解决方案:

网上搜了一下,发现有不少解决方案,相比较之下,zywang的方案较佳

在其基础上,进行补充和完善,以满足需求,整理后的代码如下:
代码一、核心代码:

function forbidBackSpace(e) { 
var ev = e || window.event; //获取event对象 
var obj = ev.target || ev.srcElement; //获取事件源 
var t = obj.type || obj.getAttribute('type'); //获取事件源类型 
//获取作为判断条件的事件类型 
var vReadOnly = obj.readOnly; 
var vDisabled = obj.disabled; 
//处理undefined值情况 
vReadOnly = (vReadOnly == undefined) ? false : vReadOnly; 
vDisabled = (vDisabled == undefined) ? true : vDisabled; 
//当敲Backspace键时,事件源类型为密码或单行、多行文本的, 
//并且readOnly属性为true或disabled属性为true的,则退格键失效 
var flag1 = ev.keyCode == 8 && (t == "password" || t == "text" || t == "textarea") && (vReadOnly == true || vDisabled == true); 
//当敲Backspace键时,事件源类型非密码或单行、多行文本的,则退格键失效 
var flag2 = ev.keyCode == 8 && t != "password" && t != "text" && t != "textarea"; 
//判断 
if (flag2 || flag1) return false; 
} 
//禁止后退键 作用于Firefox、Opera 
// document.onkeypress = forbidBackSpace; 
//禁止后退键 作用于IE、Chrome 
document.onkeydown = forbidBackSpace;

代码二、

function bindBackEvent() { //防止退格键
 	$(document).keydown(function(e){
 		e = window.event || e;
	 	var code = e.keyCode || e.which;
	 	if (code == 8) {
	 		var src = e.srcElement || e.target;
	 		var tag = src.tagName;
	 		if (tag != "INPUT" && tag != "TEXTAREA") {
	 			e.returnValue = false; 
	 			return false;
	 		} else if ((tag == "INPUT" || tag == "TEXTAREA") && src.readOnly == true) {
	 			e.returnValue = false;
	 			return false; 
	 		}
	 	}
 	});
 }

Javascript 相关文章推荐
JS的IE和Firefox兼容性集锦
Dec 11 Javascript
Google排名中的10个最著名的 JavaScript库
Apr 27 Javascript
jQuery 无限级菜单的简单实例
Feb 21 Javascript
浅析JQuery中的html(),text(),val()区别
Sep 01 Javascript
原生js获取浏览器窗口及元素宽高常用方法集合
Jan 18 Javascript
Vue服务端渲染和Vue浏览器端渲染的性能对比(实例PK )
Mar 31 Javascript
layui.js实现的表单验证功能示例
Nov 15 Javascript
webpack本地开发环境无法用IP访问的解决方法
Mar 20 Javascript
JavaScript使用Math.random()生成简单的验证码
Jan 21 Javascript
VUE脚手架具体使用方法
May 20 Javascript
Smartour 让网页导览变得更简单(推荐)
Jul 19 Javascript
JS获取当前时间戳方法解析
Aug 29 Javascript
javaScript实现浮点数转十六进制字符
Oct 29 #Javascript
JavaScript显示当然日期和时间即年月日星期和时间
Oct 29 #Javascript
js动态设置div的值下例子
Oct 29 #Javascript
Jquery 复选框取值兼容FF和IE8(测试有效)
Oct 29 #Javascript
Js获取数组最大和最小值示例代码
Oct 29 #Javascript
js 遍历json返回的map内容示例代码
Oct 29 #Javascript
jQuery实现公告文字左右滚动的实例代码
Oct 29 #Javascript
You might like
curl实现站外采集的方法和技巧
2014/01/31 PHP
详细解读PHP的Yii框架中登陆功能的实现
2015/08/21 PHP
laravel实现登录时监听事件,添加登录用户的记录方法
2019/09/30 PHP
网络图片延迟加载实现代码 超越jquery控件
2010/03/27 Javascript
javascript动态向网页中添加表格实现代码
2014/02/19 Javascript
JavaSript中变量的作用域闭包的深入理解
2014/05/12 Javascript
在页面加载完成后通过jquery给多个span赋值
2014/05/21 Javascript
javascript中Object使用详解
2015/01/26 Javascript
angularJS 如何读写缓冲的方法(推荐)
2016/08/06 Javascript
JS上传图片预览插件制作(兼容到IE6)
2016/08/07 Javascript
Vue.js组件tree实现省市多级联动
2016/12/02 Javascript
基于canvas的二维码邀请函生成插件
2017/02/14 Javascript
微信小程序开发图片拖拽实例详解
2017/05/05 Javascript
微信小程序删除处理详解
2017/08/16 Javascript
JavaScript深拷贝和浅拷贝概念与用法实例分析
2018/06/07 Javascript
JS获取并处理php数组的方法实例分析
2018/09/04 Javascript
原生JavaScript之es6中Class的用法分析
2020/02/23 Javascript
javascript设计模式 ? 享元模式原理与用法实例分析
2020/04/15 Javascript
Python实现的将文件每一列写入列表功能示例【测试可用】
2018/03/19 Python
python 按照固定长度分割字符串的方法小结
2018/04/30 Python
Python3 tkinter 实现文件读取及保存功能
2019/09/12 Python
Django实现文件上传和下载功能
2019/10/06 Python
如何基于python操作json文件获取内容
2019/12/24 Python
西安众合通用.net笔试题
2013/03/18 面试题
介绍一下Ruby的多线程处理
2013/02/01 面试题
人事专员岗位职责
2013/11/20 职场文书
网站设计师的岗位职责
2013/11/21 职场文书
浙大毕业生自荐信
2014/01/26 职场文书
电子商务专业毕业生自荐书
2014/06/22 职场文书
毕业设计致谢词
2015/05/14 职场文书
新郎父母婚礼致辞
2015/07/27 职场文书
班级班风口号大全
2015/12/25 职场文书
初中思品教学反思
2016/02/20 职场文书
SpringAop日志找不到方法的处理
2021/06/21 Java/Android
ICOM R71E和R72E图文对比解说
2022/04/07 无线电
Python自动化实战之接口请求的实现
2022/05/30 Python