關于鍵盤Backpace鍵自動退出系統(tǒng)問題

• 遇見需求

  光標在非文本框內(nèi)，按"Backspace"鍵，整個頁面會回退到系統(tǒng)登錄頁（谷歌沒問題，主要是IE8，火狐以及360等瀏覽器）

• 解決方案

  在公共js中，通過js監(jiān)聽backspace按鍵的按下事件：

1. 如果標簽不是input或者textarea則阻止Backspace
2. input標簽除了（TEXT、TEXTAREA、PASSWORD）這些類型，全部阻止Backspace
3. input或者textarea輸入框如果不可編輯則阻止Backspace

window.document.onkeydown = banBackSpace;

    function banBackSpace(e) {
        var ev = e || window.event;
        //各種瀏覽器下獲取事件對象
        var obj = ev.relatedTarget || ev.srcElement || ev.target || ev.currentTarget;
        //按下Backspace鍵
        if (ev.keyCode == 8) {
            var tagName = obj.nodeName //標簽名稱
            //如果標簽不是input或者textarea則阻止Backspace
            if (tagName != 'INPUT' && tagName != 'TEXTAREA') {
                return stopIt(ev);
            }
            var tagType = obj.type.toUpperCase(); //標簽類型
            //input標簽除了下面幾種類型，全部阻止Backspace
            if (tagName == 'INPUT' && (tagType != 'TEXT' && tagType != 'TEXTAREA' && tagType != 'NUMBER' && tagType != 'PASSWORD')) {
                return stopIt(ev);
            }
            //input或者textarea輸入框如果不可編輯則阻止Backspace
            if ((tagName == 'INPUT' || tagName == 'TEXTAREA') && (obj.readOnly == true || obj.disabled == true)) {
                return stopIt(ev);
            }
        }
    }

    function stopIt(ev) {
        if (ev.preventDefault) {
            //preventDefault()方法阻止元素發(fā)生默認的行為
            ev.preventDefault();
        }
        if (ev.returnValue) {
            //IE瀏覽器下用window.event.returnValue = false;實現(xiàn)阻止元素發(fā)生默認的行為
            ev.returnValue = false;
        }
        return false;
    }

為什么使用onkeydown而不使用onkeyup？

因為onkeyup會先執(zhí)行瀏覽器默認時間，會導致backspace事件先執(zhí)行；如果使用onkeyup，可以使用addListener的第三個參數(shù)設置成true

• 注解一：

1. IE：有window.event對象 Firefox：沒有window.event對象?？梢酝ㄟ^給函數(shù)的參數(shù)傳遞event對象。如onmousemove=doMouseMove(event) 統(tǒng)一的解決方法：var event = event || window.event;
2. IE：even對象有srcElement屬性，但是沒有target屬性 Firefox：even對象有target屬性，但是沒有srcElement屬性 解決方法：var obj = event.relatedTarget || event.srcElement || event.target || event.currentTarget;

• 注解二： 可在Chrome和Firefox中禁用Backspace作為Back Button，詳情參考鏈接：How to Disable Backspace as Back Button in Chrome and Firefox