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

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

©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • 前端开发面试题 面试题目: 根据你的等级和职位的变化,入门级到专家级,广度和深度都会有所增加。 题目类型: 理论知...
    怡宝丶阅读 7,410评论 0 7
  • 我们首先要明白,我们给页面添加效果用到的js到底是什么?js其实包含三部分:dom 文档对象模型 bom 浏览...
    一直以来都很好阅读 4,221评论 0 0
  • 每一个人谈到生活吃饭的时候,都需要去工作,当然,工作能够使人充实自己,让人感到工作的快乐,但是,工作也是一件复杂的...
    你被占用了阅读 3,933评论 2 0
  • 我固执地不肯撕下那一页日历,以为时间就会永远停留在那一日。然而,即使时间为我停留在那一日又怎样? 我不敢上...
    林贝贝贝贝阅读 1,567评论 0 1
  • 文/Green枫叶 匆匆向公交站台赶,隔着汽车的远光灯,我依稀见直达车已到站,三步并作两步向前跑,频频向司机招手,...
    Green枫叶阅读 1,522评论 0 1

友情链接更多精彩内容