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 相关文章推荐
jquery事件重复绑定的快速解决方法
Jan 03 Javascript
Javascript正则控制文本框只能输入整数或浮点数
Sep 02 Javascript
jquery通过ajax加载一段文本内容的方法
Jan 15 Javascript
js简单抽奖代码
Jan 16 Javascript
JS实现进入页面时渐变背景色的方法
Feb 25 Javascript
JavaScript 模块化编程(笔记)
Apr 08 Javascript
jQuery实现鼠标经过弹出提示信息的地图热点效果
Aug 07 Javascript
AngularJS上拉加载问题解决方法
May 23 Javascript
JavaScript暂停和继续定时器的实现方法
Jul 18 Javascript
20分钟打造属于你的Bootstrap站点
Jul 27 Javascript
vue-cli2 构建速度优化的实现方法
Jan 08 Javascript
JavaScript实现拖拽功能
Feb 11 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
浅谈php自定义错误日志
2015/02/13 PHP
jQuery的each终止或跳过示例代码
2013/12/12 Javascript
JavaScript中对象property的读取和写入方法介绍
2014/12/30 Javascript
JavaScript中setMonth()方法的使用详解
2015/06/11 Javascript
js实现索引图片切换效果
2015/11/21 Javascript
jquery根据一个值来选中select下的option实例代码
2016/08/29 Javascript
js html5 css俄罗斯方块游戏再现
2016/10/17 Javascript
js遮罩效果制作弹出注册界面效果
2017/01/25 Javascript
vue-router路由简单案例介绍
2017/02/21 Javascript
JS设计模式之单例模式(一)
2017/09/29 Javascript
对vue事件的延迟执行实例讲解
2018/08/28 Javascript
vue通过指令(directives)实现点击空白处收起下拉框
2018/12/06 Javascript
利用Angular7开发一个Radio组件的全过程
2019/07/11 Javascript
JavaScript 截取字符串代码实例
2019/09/05 Javascript
python实现忽略大小写对字符串列表排序的方法
2014/09/25 Python
Python中的pprint折腾记
2015/01/21 Python
Python随机生成信用卡卡号的实现方法
2015/05/14 Python
python3操作mysql数据库的方法
2017/06/23 Python
Python模块的加载讲解
2019/01/15 Python
numpy基础教程之np.linalg
2019/02/12 Python
Python实现的对本地host127.0.0.1主机进行扫描端口功能示例
2019/02/15 Python
Python模块_PyLibTiff读取tif文件的实例
2020/01/13 Python
opencv+python实现均值滤波
2020/02/19 Python
Python操作MySQL数据库的示例代码
2020/07/13 Python
基于Python制作一副扑克牌过程详解
2020/10/19 Python
纯css3实现思维导图样式示例
2018/11/01 HTML / CSS
英国花园家具中心:Garden Furniture Centre
2017/08/24 全球购物
世界上最大的在线学习和教学市场:Udemy
2017/11/08 全球购物
英国街头品牌:Bee Inspired Clothing
2018/02/12 全球购物
EJB与JAVA BEAN的区别
2016/08/29 面试题
社区党务公开实施方案
2014/03/18 职场文书
保护环境倡议书300字
2014/05/19 职场文书
李培根演讲稿
2014/05/22 职场文书
大学生,三分钟即兴演讲稿
2019/07/22 职场文书
读《儒林外史》有感:少一些功利,多一些真诚
2020/01/19 职场文书
Java实现HTML转为Word的示例代码
2022/06/28 Java/Android