码迷,mamicode.com
首页 > Web开发 > 详细

html页面实现回车跳转下一文本框

时间:2017-04-06 13:17:04      阅读:250      评论:0      收藏:0      [点我收藏+]

标签:win   isp   att   attribute   提交表单   keycode   return   orm   dex   

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) { //录入回车时才往下一录入框跳
        //下一个录入框的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();
                    }
                }
            }
        }
    }
}

 

html页面实现回车跳转下一文本框

标签:win   isp   att   attribute   提交表单   keycode   return   orm   dex   

原文地址:http://www.cnblogs.com/cy2011/p/6672954.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!