Javascript 自动选择下一个输入字段并返回

一旦输入，用户就不能回去更改他们的输入

$（“表单”）。在（“键控更改粘贴”上，函数（e）{
e、 预防默认值（）；
var a=$（this.find）（“input[type='text'].a”）；
var b=$（this.find）（“input[type='text'].b”）；
var c=$（this.find）（“input[type='text'].c”）；
var d=$（this.find）（“input[type='text'].d”）；
var e=$（this.find）（“input[type='text'].e”）；
var f=$（this.find）（“input[type='text'].f”）；
a、 val（a.val（）.replace（/[^0-9]/g，”）；
b、 val（b.val（）.replace（/[^0-9]/g，”）；
c、 val（c.val（）.replace（/[^0-9]/g，”）；
d、 val（d.val（）.replace（/[^0-9]/g，”）；
e、 val（如val（）.replace（/[^0-9]/g，”）；
f、 val（f.val（）.replace（/[^0-9]/g，”）；
如果（a.val（）.length==a.attr（'maxlength'））{
a、 下一步（“输入”）.focus（）；
}
如果（b.val（）.length==a.attr（'maxlength'））{
b、 下一步（“输入”）.focus（）；
}
如果（c.val（）.length==a.attr（'maxlength'））{
c、 next（）.next（“输入”）.focus（）；
}
如果（d.val（）.length==a.attr（'maxlength'））{
d、 下一步（“输入”）.focus（）；
}
如果（e.val（）.length==a.attr（'maxlength'））{
e、 下一步（“输入”）.focus（）；
}
如果（f.val（）.length==a.attr（'maxlength'））{
f、 下一步（“输入”）.focus（）；
}
});
输入{
宽度：20px；
文本对齐：居中；
}

—
任何时候，当你发现自己发现自己的代码非常重复时，一定要考虑循环

以下内容将允许用户编辑其值。它还大大减少了您的代码

$('form').on('input', e => {
    var letters = ['a', 'b', 'c', 'd', 'e', 'f'];
    letters.forEach(letter => {
        let field = $(e.target);
        field.val(field.val().replace(/[^0-9]/g, ''));
        if(field.val().length == field.attr('maxlength')) { field.nextAll('input').first().focus(); }
    });
});


注:


倾听输入事件；它的优点是覆盖了您正在收听的所有事件，而且关键是在按键后触发（这意味着您可以确保从字段中获取最新、完整的值）
避免重复编码；循环允许我们只编写一次业务逻辑，而不是重复编写
不需要阻止事件的默认操作
通过使用
nextAll（'input'）.first（）
，我们可以确保获得下一个
输入，无论它是下一个同级输入，还是第三个输入由另一种类型的元素分隔

我的想法是下一步集中注意力，在到达最后一个时循环。如果有新条目，请替换编号


//初始化html
常数nbInput=6；
让html=''；
对于（设i=0；i
输入{
宽度：20px；
文本对齐：居中；
}
清除焦点上的输入即可。（我不经常使用jQuery，因此如果有任何语法错误，我深表歉意。）

也就是说，Utkanos 100%正确地认为循环是处理这两个问题（自动前进和允许编辑）的正确方法。
为了确保我能很好地理解它，您希望在结束时禁止用户更改它插入的数字？@GrégoryNEUT，并且您希望删除一些数字。目前，您必须进入每个字段并以这种方式进行编辑。这不是一种非常方便用户的方式，但如果您确实想阻止用户编辑填充的输入字段，只需将
焦点
事件绑定到输入字段即可。在回调中，如果输入的
值
属性的计算结果为truthy，则强制调用
blur（）
方法。@Terry不，不是。因为当前无法轻松擦除输入。在初始输入时效果很好。但是，如果用户希望通过从字段
f
向字段
a
擦除来更改输入，可以这样做吗？“从字段f向字段a擦除”-不确定您的意思，因此我输入了123-123。我现在在
input.f
。我擦除
input.f
。重点应该回到
input.e
。好吧，这和你现在的问题不同。我看不出为什么会出现这种情况，但这只是我的看法。为什么不自己尝试一下呢。请创建一个stackoverflow代码段而不是一个小提琴，这样更容易尝试
$("form").focus(function() {

    var a = $(this).find("input[type='text'].a")
    var b = $(this).find("input[type='text'].b") // ...etc  

    a.val("");
    b.val(""); // ...etc
});