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。