首页 > 代码库 > 阻止按下backspace键造成页面回退相像

阻止按下backspace键造成页面回退相像

在IE浏览器中,会出现当你使用鼠标选中input标签或者是textarea标签,或者啥也没选中的时候,按下backspace键会触发浏览器的回退。

针对以上问题的解决思路:
    1. 当按下键盘时,判断当前按键是否为backspace
    2. 如果是,获取当前光标选中的元素、
    3. 如果不是input或者textarea,取消backspace的关联行为
    4. 如果是,则判断是否为text,password等可编辑的文本框,如果不是,则取消默认行为(此处只需要判断input,不需要判断textarea)
    5. 如果满足,继续判断是否为readonly或者disabled,如果是阻止默认行为
 

以下是代码实现,分为JS和jQuery两种,针对浏览器的适配,推荐使用jQuery版

1. JavaScript版:

 

 1 /*
 2      JS版
 3      作用:阻止按下backspace键造成页面回退相像
 4  */
 5 window.onload=function(){
 6     document.getElementsByTagName("body")[0].onkeydown =function(){
 7         /*获取事件对象
 8          * event.relatedTarget IE不支持,fireFox不支持
 9          * event.srcElement IE支持,fireFox不支持
10          * event.target IE,fireFox都支持
11          * event.currentTarget IE和fireFox都支持 
12          */
13         /*var elem =  event.currentTarget || event.relatedTarget || event.target || event.target;*/
14 
15         if(event.keyCode==8){//判断按键为backSpace键
16 
17                 //获取事件
18                 var elem = event.srcElement || event.currentTarget; 
19                 //判断是否需要阻止按下键盘的事件默认传递
20                 var name = elem.nodeName;
21                 // 如果name不为INPUT或者是TEXTAREA任意一个,就阻止该动作
22                 if(name!=‘INPUT‘ && name!=‘TEXTAREA‘){
23                     return stopIt(event);
24                 }
25                 // 获取该元素的type属性值
26                 var type_e = elem.type.toUpperCase();
27                 // 如果type属性不是text,textarea,password.file中的任意一个,则阻止该backspace操作
28                 if(name==‘INPUT‘ && (type_e!=‘TEXT‘ && type_e!=‘TEXTAREA‘ && type_e!=‘PASSWORD‘ && type_e!=‘FILE‘)){
29                         return stopIt(event);
30                 }
31                 // 如果是个input,并且type也满足要求,继续判断是否是readonly或者是disabled不可编辑的文本框
32                 // 如果是,则阻止该backspace操作
33                 if(name==‘INPUT‘ && (elem.readOnly==true || elem.disabled ==true)){
34                         return stopIt(event);
35                 }
36             }
37         }
38     }
39     function stopIt(e){
40             // 如果设置了该属性,它的值比事件句柄的返回值优先级高。
41             // 把这个属性设置为 fasle,可以取消发生事件的源元素的默认动作。
42             if(e.returnValue){
43                 e.returnValue = http://www.mamicode.com/false ;
44             }
45             // 通知浏览器不要执行与该事件相关联的默认动作
46             if(e.preventDefault ){
47                 e.preventDefault();
48             }
49             // 阻止浏览器执行相关动作
50             return false;
51     }

 

2. jQuery版:

 1 /*
 2      jQuery版
 3 */
 4 $(function(){
 5     $("body").keydown(function(e){
 6         // 获取当前按键的Code
 7         var keyCode = e.which;
 8         // 当keyCode值为8是,为backspace按键被触发
 9         if(keyCode == 8){
10             // 获取按下backspace键时光标指向的元素
11             var elem = document.activeElement.tagName;
12             //判断elem是否为input或者是textarea
13             if(elem != "INPUT" && elem != "TEXTAREA"){
14                 // 阻止该操作
15                 return stopIt(e);
16             }
17             // 如果elem为input或者是textarea,则判断type类型是否为text,textarea,password,file
18             var elemType = document.activeElement.type;
19 
20             if(elemType != "text" && elemType != "textarea" && elemType!= "password" && elemType != "file"){
21                 return stopIt(e);
22             }
23             // 如果满足上述条件了,继续判断是否为readonly或者是disabled
24             //var dis = document.activeElement.getAttribute("disabled");  // 返回值为null或disabled
25             //var read = document.activeElement.getAttribute("readonly"); // 返回值为null或readonly
26 
27             //var dis = document.activeElement.disabled;  //返回值为false或true
28             //var read = document.activeElement.readOnly; // 返回值为false或true
29 
30             if(document.activeElement.disabled || document.activeElement.readOnly){
31                 return stopIt(e);
32             }
33         }
34     });
35 });
36 function stopIt (e) {
37     // 如果设置了该属性,它的值比事件句柄的返回值优先级高。
38     // 把这个属性设置为 fasle,可以取消发生事件的源元素的默认动作。
39     if(e.returnValue){
40         e.returnValue = http://www.mamicode.com/false ;
41     }
42     // 通知浏览器不要执行与该事件相关联的默认动作
43     if(e.preventDefault ){
44         e.preventDefault();
45     }
46     // 阻止浏览器执行相关动作
47     return false;
48 }

 

 

阻止按下backspace键造成页面回退相像