js記錄之回車替換成TAB

之前有提過，我所在的行業是稅務行業，所以做的項目大多和報表相關。

由於頁面有過多的input，所以前陣子產品就提了，能不能實現回車替換TAB的功能，即回車后自動跳到下一個可輸入的input元素。

剛開始我想到的，點擊回車，能不能觸發TAB的點擊事件。經嘗試，發現不行。隨后也搜索了一下網頁，找到如下的代碼：

document.onkeydown = function enterToTab() { 
    if(event.srcElement.type != "submit" && event.srcElement.type!="image" && event.srcElement.type != "textarea" 
    && event.keyCode == 13) 
        event.keyCode = 9; 
    } 
}

在IE8及以下是行的，但在chrome下不可以。

既然這條路行不通，那就只能轉換思路了。

自己來定制類似tab的規則，因為產品的需求很簡單，所以我只需要實現針對可輸入的input text框，回車后，跳到下一個可輸入的input text框即可。

所以基於上面的代碼，我簡單改了一下：

//處理點擊enter跳到下一個input
document.onkeydown = function enterToTab(event){
    var inputs = document.querySelectorAll("input[type="text"]:enabled"),
            len = inputs.length;
    if(event.srcElement.type == "text" && event.keyCode == 13){
        var index = -1;
        for(var i = 0; i < len; i++){
            if(event.srcElement.id == inputs[i].id){
                index = i;
                break;
            }
        }
        if(index >= 0 && inputs[index + 1]){
            inputs[index + 1].focus();
        }
    }
}

話說event.srcElement也能在webkit的瀏覽器下跑通，但建議用標准的event.target。