10月10, 2016

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。

本文链接:www.my-fe.pub/post/js-record-replace-tab-to-enter.html

-- EOF --

Comments

评论加载中...

注:如果长时间无法加载,请针对 disq.us | disquscdn.com | disqus.com 启用代理。