美文网首页
JS实现 输入框回车后跳到下一个,和只准输入数字

JS实现 输入框回车后跳到下一个,和只准输入数字

作者: Julianne_zhang | 来源:发表于2020-03-01 22:08 被阅读0次
    window.onload = function () {
        //阻止按回车按钮后提交表单的问题
        document.getElementsByTagName("form")[0].onkeydown = function () {
            if (event.keyCode == 13) { return false; }
        };
        var inputs = document.getElementsByTagName("input");
        var index = 1;
        for (var i = 0; i < inputs.length; i++) {
            if (inputs[i].type == "text" && inputs[i].style.display != "none" && inputs[i].getAttribute("disabled") != "disabled") {
                //给页面上的没有隐藏的文本框设置tabindex顺序值,下文按tabindex顺序跳转
                inputs[i].setAttribute("tabindex", index);
                //监听onkeydown事件,输入回车时实现跳至下一文本框
                inputs[i].onkeydown = goNextInput;
                index++;
            }
        }
    };
    
    function goNextInput() {
        if (window.event.keyCode == 13 ||  window.event.keyCode == 9) { //录入回车时才往下一录入框跳
            //下一个录入框的tabindex值
            var nextIndex = parseInt(window.event.srcElement.getAttribute("tabindex")) + 1;
            var inputs = document.getElementsByTagName("input");
            for (var i = 0; i < inputs.length; i++) {
                if (inputs[i].type == "text" && inputs[i].style.display != "none") {
                    var tabIndex = inputs[i].getAttribute("tabindex");
                    if (tabIndex != null) {
                        var index = parseInt(tabIndex);
                        if (typeof index == "number" && !isNaN(index) && index == nextIndex) {
                            inputs[i].focus();
                        }
                    }
                }
            }
        }
    }
    
     function typeText(a) {
            var m = "";
        if(a.value.substring(0, 1) == "-")
         m = "-";
    var str = (a.value.replace(/[^0-9.]/g, '')).replace(/[.][0-9]*[.]/, '.');
    if(str.substring(0, 1) == ".")
    str = "0" + str;
    a.value = m + str;
    //只输入整数和小数
    //onkeyup="value=value.replace(/[^\d{1,}\.\d{1,}|\d{1,}]/g,'')"  
    }
    
    

    以上这些直接copy到js文件,然后在需要的html页面头文件<script src="js/myxm.js"></script>包进去就行了,因为是window.onload函数,且都getby的是form和input的TagName

    相关文章

      网友评论

          本文标题:JS实现 输入框回车后跳到下一个,和只准输入数字

          本文链接:https://www.haomeiwen.com/subject/jjqrkhtx.html