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

前端技术 2023/09/08 JavaScript

上周提交了一个项目（内部使用的），一同事提出个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; 
	 		}
	 	}
 	});
 }


本文地址：https://www.stayed.cn/item/23275

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案