javascript禁用Backspace退格键

今天有个新需求,要求在窗口中编辑的时候禁用掉退格键,因为退格键会发生页面后退的动作,编辑的时候非常不便.

在网上搜索了一下,有两种方法,最后决定采用这位仁兄的方法,见http://volunteer521.iteye.com/blog/830522,这是其根据第一种方法做的改良,但是发现还是存在bug,最后做解释!

这里容我多说几句,先说第一种方法:　原理是采用键盘监听,处理键盘事件,这里他的处理方法是将type="text" "password"及"textarea"的输入框以外的元素做了退格键的禁用.

javascript代码


//处理键盘事件

function doKey(e){

var ev = e || window.event;//获取event对象

var obj = ev.target || ev.srcElement;//获取事件源

var t = obj.type || obj.getAttribute('type');//获取事件源类型

if(ev.keyCode == 8 && t != "password" && t != "text" && t != "textarea"){

return false;

}

}

//禁止后退键 作用于Firefox、Opera

document.onkeypress=doKey;

//禁止后退键  作用于IE、Chrome

document.onkeydown=doKey;
以上的bug在于,当编辑窗口中有一个不可编辑的输入框的时候,如果光标的位置在其上,敲退格键的时候依然会发生页面后退.所以,第二种方法做了改良:代码如下

//处理键盘事件 禁止后退键（Backspace）密码或单行、多行文本框除外
function banBackSpace(e){
    var ev = e || window.event;//获取event对象
    var obj = ev.target || ev.srcElement;//获取事件源

    var t = obj.type || obj.getAttribute('type');//获取事件源类型

    //获取作为判断条件的事件类型
    var vReadOnly = obj.getAttribute('readonly');
    var vEnabled = obj.getAttribute('enabled');
    //处理null值情况
    vReadOnly = (vReadOnly == null) ? false : vReadOnly;
    vEnabled = (vEnabled == null) ? true : vEnabled;

    //当敲Backspace键时，事件源类型为密码或单行、多行文本的，
    //并且readonly属性为true或enabled属性为false的，则退格键失效
    var flag1=(ev.keyCode == 8 && (t=="password" || t=="text" || t=="textarea")
                && (vReadOnly==true || vEnabled!=true))?true:false;

    //当敲Backspace键时，事件源类型非密码或单行、多行文本的，则退格键失效
    var flag2=(ev.keyCode == 8 && t != "password" && t != "text" && t != "textarea")
                ?true:false;

    //判断
    if(flag2){
        return false;
    }
    if(flag1){
        return false;
    }
}

//禁止后退键 作用于Firefox、Opera
document.onkeypress=banBackSpace;
//禁止后退键  作用于IE、Chrome
document.onkeydown=banBackSpace;
而以上的bug在于,在浏览器中,光标在一个不可编辑的输入框上的时候,退格键依然会产生页面后退效果!

原因: 在Firefox及Chrome中 obj.getAttribute('readonly') 返回的值是null,或"",而在IE中,该方法返回的是"readonly"或"",而且根据测试,

并没有"enable"的属性,而应该是"disabled",因此,上述方法固然会失效.而且获取DOM的对象属性及标准属性的时候,不应该采用getAttribute方法,这是不准确的,应采用obj.attribute标准方法,这样不会存在因浏览器对js的解释差异而导致的兼容性问题.因此修正以上bug后,产出的代码如下:

//处理键盘事件 禁止后退键（Backspace）密码或单行、多行文本框除外
function banBackSpace(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=banBackSpace;
//禁止退格键 作用于IE、Chrome
document.onkeydown=banBackSpace;