阻止按下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;
}