阻止按下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版：

 /*
      JS版
      作用：阻止按下backspace键造成页面回退相像
  */
 window.onload=function(){
     document.getElementsByTagName("body")[0].onkeydown =function(){
         /*获取事件对象
          * event.relatedTarget IE不支持,fireFox不支持
          * event.srcElement IE支持,fireFox不支持
          * event.target IE,fireFox都支持
          * event.currentTarget IE和fireFox都支持
          */
         /*var elem =  event.currentTarget || event.relatedTarget || event.target || event.target;*/

         if(event.keyCode==8){//判断按键为backSpace键

                 //获取事件
                 var elem = event.srcElement || event.currentTarget;
                 //判断是否需要阻止按下键盘的事件默认传递
                 var name = elem.nodeName;
                 // 如果name不为INPUT或者是TEXTAREA任意一个，就阻止该动作
                 if(name!='INPUT' && name!='TEXTAREA'){
                     return stopIt(event);
                 }
                 // 获取该元素的type属性值
                 var type_e = elem.type.toUpperCase();
                 // 如果type属性不是text,textarea,password.file中的任意一个，则阻止该backspace操作
                 if(name=='INPUT' && (type_e!='TEXT' && type_e!='TEXTAREA' && type_e!='PASSWORD' && type_e!='FILE')){
                         return stopIt(event);
                 }
                 // 如果是个input,并且type也满足要求，继续判断是否是readonly或者是disabled不可编辑的文本框
                 // 如果是，则阻止该backspace操作
                 if(name=='INPUT' && (elem.readOnly==true || elem.disabled ==true)){
                         return stopIt(event);
                 }
             }
         }
     }
     function stopIt(e){
             // 如果设置了该属性，它的值比事件句柄的返回值优先级高。
             // 把这个属性设置为 fasle，可以取消发生事件的源元素的默认动作。
             if(e.returnValue){
                 e.returnValue = false ;
             }
             // 通知浏览器不要执行与该事件相关联的默认动作
             if(e.preventDefault ){
                 e.preventDefault();
             }
             // 阻止浏览器执行相关动作
             return false;
     }

2. jQuery版：

 /*
      jQuery版
 */
 $(function(){
     $("body").keydown(function(e){
         // 获取当前按键的Code
         var keyCode = e.which;
         // 当keyCode值为8是，为backspace按键被触发
         if(keyCode == 8){
             // 获取按下backspace键时光标指向的元素
             var elem = document.activeElement.tagName;
             //判断elem是否为input或者是textarea
             if(elem != "INPUT" && elem != "TEXTAREA"){
                 // 阻止该操作
                 return stopIt(e);
             }
             // 如果elem为input或者是textarea，则判断type类型是否为text,textarea,password,file
             var elemType = document.activeElement.type;

             if(elemType != "text" && elemType != "textarea" && elemType!= "password" && elemType != "file"){
                 return stopIt(e);
             }
             // 如果满足上述条件了，继续判断是否为readonly或者是disabled
             //var dis = document.activeElement.getAttribute("disabled");  // 返回值为null或disabled
             //var read = document.activeElement.getAttribute("readonly"); // 返回值为null或readonly

             //var dis = document.activeElement.disabled;  //返回值为false或true
             //var read = document.activeElement.readOnly; // 返回值为false或true

             if(document.activeElement.disabled || document.activeElement.readOnly){
                 return stopIt(e);
             }
         }
     });
 });
 function stopIt (e) {
     // 如果设置了该属性，它的值比事件句柄的返回值优先级高。
     // 把这个属性设置为 fasle，可以取消发生事件的源元素的默认动作。
     if(e.returnValue){
         e.returnValue = false ;
     }
     // 通知浏览器不要执行与该事件相关联的默认动作
     if(e.preventDefault ){
         e.preventDefault();
     }
     // 阻止浏览器执行相关动作
     return false;
 }