• 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。

  • 相关阅读:
    MT7688 Ubuntu uboot编译报错问题
    Ubuntu安装FTP服务器
    普罗米修斯
    【笔记】redis实现类
    问题记录:'AxesSubplot' object does not support indexing
    matplotlib解决子图重叠问题:plt.tight_layout()
    JavaBean转Json,null值忽略问题
    Lombok @SneakyThrows注解
    SpringBoot整合logback
    [转]SpringBoot 生产中 16 条最佳实践
  • 原文地址:https://www.cnblogs.com/ouruola863/p/12166882.html
Copyright © 2020-2023  润新知