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 相关文章推荐
javascript 跳转代码集合
Dec 03 Javascript
向左滚动文字 js代码效果
Aug 17 Javascript
JavaScript判断访问的来源是手机还是电脑,用的哪种浏览器
Dec 12 Javascript
JS实现的一个简单的Autocomplete自动完成例子
Apr 16 Javascript
实现图片预加载的三大方法及优缺点分析
Nov 19 Javascript
jQuery实现的进度条效果
Jul 15 Javascript
微信小程序 swiper组件轮播图详解及实例
Nov 16 Javascript
基于jstree使用AJAX请求获取数据形成树
Aug 29 Javascript
vue父组件向子组件(props)传递数据的方法
Jan 02 Javascript
echarts整合多个类似option的方法实例
Jul 10 Javascript
详解javascript设计模式三:代理模式
Mar 25 Javascript
十分钟教你上手ES2020新特性
Feb 12 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
《神奇女侠:血脉》神力女超人大战犯罪公司
2020/04/09 欧美动漫
php代码把全角数字转为半角数字
2007/12/10 PHP
8个出色的WordPress SEO插件收集
2011/02/26 PHP
JavaScript静态的动态
2006/09/18 Javascript
Jquery 组合form元素为json格式,asp.net反序列化
2009/07/09 Javascript
js阻止冒泡及jquery阻止事件冒泡示例介绍
2013/11/19 Javascript
jquery实现更改表格行顺序示例
2014/04/30 Javascript
Extjs Label的 fieldLabel和html属性值对齐的方法
2014/06/15 Javascript
JS实现Fisheye效果动感放大菜单代码
2015/10/21 Javascript
Json按某个键的值进行排序
2016/12/22 Javascript
JavaScript中数组的各种操作的总结(必看篇)
2017/02/13 Javascript
bootstrap弹出层的多种触发方式
2017/05/10 Javascript
vue.js异步上传文件前后端实现代码
2017/08/22 Javascript
vue webpack打包优化操作技巧
2018/02/22 Javascript
微信小程序实现倒计时调用相机自动拍照功能
2018/06/10 Javascript
微信小程序利用canvas 绘制幸运大转盘功能
2018/07/06 Javascript
JavaScript命令模式原理与用法实例详解
2020/03/10 Javascript
[05:15]DOTA2英雄梦之声_第16期_灰烬之灵
2014/06/21 DOTA
Python中的exec、eval使用实例
2014/09/23 Python
Python itertools模块详解
2015/05/09 Python
python中单下划线_的常见用法总结
2018/07/10 Python
给keras层命名,并提取中间层输出值,保存到文档的实例
2020/05/23 Python
python时间time模块处理大全
2020/10/25 Python
如何利用input事件来监听移动端的输入
2016/04/15 HTML / CSS
Electrolux伊莱克斯巴西商店:家用电器、小家电和配件
2018/05/23 全球购物
在线课程:Skillshare
2019/04/02 全球购物
Magee 1866官网:Donegal粗花呢外套和大衣专家
2019/11/01 全球购物
美国名牌香水折扣网站:Hottperfume
2021/02/10 全球购物
机工车间主任岗位职责
2014/03/05 职场文书
实习会计求职自荐信范文
2014/03/10 职场文书
授权委托书(法人单位用)
2014/09/29 职场文书
解除劳动合同协议书(样本)
2014/10/02 职场文书
525心理健康活动总结
2015/05/08 职场文书
带你学习MySQL执行计划
2021/05/31 MySQL
JavaScript实现贪吃蛇游戏
2021/06/16 Javascript
QT连接MYSQL数据库的详细步骤
2021/07/07 MySQL