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

Posted 2020-08-15 雨帘轻挂

在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 = 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 = false ;
41     }
42     // 通知浏览器不要执行与该事件相关联的默认动作
43     if(e.preventDefault ){
44         e.preventDefault();
45     }
46     // 阻止浏览器执行相关动作
47     return false;
48 }