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

时间：2023-11-28 10:35:14

[From] http://www.jb51.net/article/42562.htm

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

           }

       }

   });

}

相关文章