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数组的遍历方式for循环与for...in
Jul 31 Javascript
javascript使用window.open提示“已经计划系统关机”的原因
Aug 15 Javascript
JavaScript操作Cookie方法实例分析
May 27 Javascript
JavaScript实现广告的关闭与显示效果实例
Jul 02 Javascript
JS组件Bootstrap Select2使用方法解析
May 30 Javascript
Web前端框架bootstrap实战【第一次接触使用】
Dec 28 Javascript
详解有关easyUI的拖动操作中droppable,draggable用法例子
Jun 03 Javascript
如何将百度地图包装成Vue的组件的方法步骤
Feb 12 Javascript
vue-cli脚手架打包静态资源请求出错的原因与解决
Jun 06 Javascript
vue图片上传组件使用详解
Dec 23 Javascript
Angular+Ionic使用queryParams实现跳转页传值的方法
Sep 05 Javascript
JavaScript实现跟随鼠标移动的盒子
Jan 28 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核心代码分析require和include的区别
2011/01/02 PHP
基于PHP array数组的教程详解
2013/06/05 PHP
使用PHP实现下载CSS文件中的图片
2015/12/06 PHP
Yii2中DropDownList简单用法示例
2016/07/18 PHP
YII框架实现自定义第三方扩展操作示例
2019/04/26 PHP
javascript 动态参数判空操作
2008/12/22 Javascript
js 加载并解析XML字符串的代码
2009/12/13 Javascript
JQuery中判断一个元素下面是否有内容或者有某个标签的判断代码
2012/02/02 Javascript
jquery点击页面任何区域实现鼠标焦点十字效果
2013/06/21 Javascript
jQuery简单实现title提示效果示例
2016/08/01 Javascript
onmouseover事件和onmouseout事件全面理解
2016/08/15 Javascript
JavaScript给每一个li节点绑定点击事件的实现方法
2016/12/01 Javascript
jquery删除数组中重复元素
2016/12/05 Javascript
无法获取隐藏元素宽度和高度的解决方案
2017/03/07 Javascript
js实现产品缩略图效果
2017/03/10 Javascript
Vue.js与 ASP.NET Core 服务端渲染功能整合
2017/11/16 Javascript
angular 用Observable实现异步调用的方法
2018/12/27 Javascript
解决vue cli4升级sass-loader(v8)后报错问题
2020/07/30 Javascript
谈谈JavaScript中的函数
2020/09/08 Javascript
python实现文件快照加密保护的方法
2015/06/30 Python
Python zip()函数用法实例分析
2018/03/17 Python
python利用requests库模拟post请求时json的使用教程
2018/12/07 Python
django自带的权限管理Permission用法说明
2020/05/13 Python
python matplotlib工具栏源码探析三之添加、删除自定义工具项的案例详解
2021/02/25 Python
意大利消费电子产品购物网站:SLG Store
2019/12/26 全球购物
TecoBuy澳大利亚:在线电子和小工具商店
2020/06/25 全球购物
医院门卫岗位职责
2013/12/30 职场文书
工厂实习感言
2014/01/14 职场文书
园林设计专业毕业生求职信
2014/03/23 职场文书
《会走路的树》教后反思
2014/04/19 职场文书
庆六一活动总结
2014/08/29 职场文书
思想作风纪律整顿心得体会
2014/09/04 职场文书
初三英语教学反思
2016/02/15 职场文书
2019年销售部季度工作计划3篇
2019/10/09 职场文书
Redisson实现Redis分布式锁的几种方式
2021/08/07 Redis
使用CSS自定义属性实现骨架屏效果
2022/06/21 HTML / CSS