javascript禁用Backspace退格键（结合自己实际应用中遇到的textarea中退格造成页面假死问题做了修改）

来源：互联网发布：mac如何打开ppt 编辑：程序博客网时间：2024/06/04 17:55

javascript禁用Backspace退格键

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

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

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

javascript代码

01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
//处理键盘事件
 
functiondoKey(e){
 
varev = e || window.event;//获取event对象
 
varobj = ev.target || ev.srcElement;//获取事件源
 
vart = obj.type || obj.getAttribute('type');//获取事件源类型
 
if(ev.keyCode == 8 && t != "password"&& t != "text"&& t != "textarea"){
 
returnfalse;
 
}
 
}
 
//禁止后退键 作用于Firefox、Opera
 
document.onkeypress=doKey;
 
//禁止后退键  作用于IE、Chrome
 
document.onkeydown=doKey;

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

01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
//处理键盘事件 禁止后退键（Backspace）密码或单行、多行文本框除外
functionbanBackSpace(e){
    varev = e || window.event;//获取event对象
    varobj = ev.target || ev.srcElement;//获取事件源
 
    vart = obj.type || obj.getAttribute('type');//获取事件源类型
 
    //获取作为判断条件的事件类型
    varvReadOnly = obj.getAttribute('readonly');
    varvEnabled = obj.getAttribute('enabled');
    //处理null值情况
    vReadOnly = (vReadOnly == null) ? false: vReadOnly;
    vEnabled = (vEnabled == null) ? true: vEnabled;
 
    //当敲Backspace键时，事件源类型为密码或单行、多行文本的，
    //并且readonly属性为true或enabled属性为false的，则退格键失效
    varflag1=(ev.keyCode == 8 && (t=="password"|| t=="text"|| t=="textarea")
                && (vReadOnly==true|| vEnabled!=true))?true:false;
 
    //当敲Backspace键时，事件源类型非密码或单行、多行文本的，则退格键失效
    varflag2=(ev.keyCode == 8 && t != "password"&& t != "text"&& t != "textarea")
                ?true:false;
 
    //判断
    if(flag2){
        returnfalse;
    }
    if(flag1){
        returnfalse;
    }
}
 
//禁止后退键 作用于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后,产出的代码如下:

01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
//处理键盘事件 禁止后退键（Backspace）密码或单行、多行文本框除外
functionbanBackSpace(e){
    varev = e || window.event;//获取event对象
    varobj = ev.target || ev.srcElement;//获取事件源
    vart = obj.type || obj.getAttribute('type');//获取事件源类型
    //获取作为判断条件的事件类型
    varvReadOnly = obj.readOnly;
    varvDisabled = obj.disabled;
    //处理undefined值情况
    vReadOnly = (vReadOnly == undefined) ? false: vReadOnly;
    vDisabled = (vDisabled == undefined) ? true: vDisabled;
    //当敲Backspace键时，事件源类型为密码或单行、多行文本的，
    //并且readOnly属性为true或disabled属性为true的，则退格键失效
    varflag1= ev.keyCode == 8 && (t=="password"|| t=="text"|| t=="textarea")&& (vReadOnly==true|| vDisabled==true);
    //当敲Backspace键时，事件源类型非密码或单行、多行文本的，则退格键失效
    varflag2= ev.keyCode == 8 && t != "password"&& t != "text"&& t != "textarea";
    //判断
    if(flag2 || flag1)returnfalse;
}
//禁止退格键 作用于Firefox、Opera
document.onkeypress=banBackSpace;
//禁止退格键 作用于IE、Chrome
document.onkeydown=banBackSpace;


//我这里结合实际应用中遇到的问题做了修改
function doKey(e){//处理键盘事件jiangkun
var ev = e || window.event;//获取event对象
var obj = ev.target || ev.srcElement;//获取事件源
var t = obj.type || obj.getAttribute('type');//获取事件源类型
var condition=false;
if(obj.getAttribute('readonly')=='readonly'||obj.getAttribute('readonly')==true){
condition=(ev.keyCode==8);
}
if(condition){
return false;
}
}