如何在填充4个字符后移动下一个输入TAB

how to move next input tab after fill 4 characters

本文关键字:移动 下一个 输入 TAB 字符 填充 4个      更新时间:2023-09-26

我有另一个问题,我已经填写了所有字段,如果我需要改变数字第二或第三个字段。

我试过下面的代码,

    (function (){
$("#num1, #num2, #num3, #num4").on("keyup", function (t) {
    //add the key's you want to accept such as backspace or arrow keys etc.
    if (t.keyCode != 13 && t.keyCode != 8 && t.keyCode != 37 && t.keyCode != 38 && t.keyCode != 39 && t.button != 1 && t.button != 2 && t.button != 3) {
    var maxlength = 4;
    var num1 = $("#num1").val().length;
    var num2 = $("#num2").val().length;
    var num3 = $("#num3").val().length;
    var num4 = $("#num4").val().length;
    $(this).val($(this).val().replace(/[^0-9'.]/g,''));
    if ( num1 >= 4) {
    $("#num2").focus();
    }
    if( num2 >= 4){
      $("#num3").focus();
    }
    if( num3 >= 4){
      $("#num4").focus();
    }
    if (num4>=4){
       $("#num4").val($("#num4").val().substr(0,4));
    }
    }
  });   
})();

您粘贴的代码有错误的if语句。让我们试着理解这个问题。以下是你的代码如何工作

第一个字段的输入值。达到四个字符下一步去。在第二个字段输入。达到四个字符下一步去。第三个字段输入。达到四个字符下一步去。在第四个字段输入。达到四个字符停止

现在的问题是当你开始编辑。当你编辑第二行的时候。你的if命令同时告诉检查第三行和第四行。所以如果第三行有四个字符,就转到第四行。如果第四行有四个字符,停止。因此,除非您删除第三行和第四行所写的内容,否则您无法编辑第二行。

下面由Bhavesh分享的链接正是你想要的。根据需要将最大限制增加到4。但是我希望你能明白问题出在哪里,这样你以后就不会犯类似的错误了。

$(".inputs").keyup(function () {
  if (this.value.length == this.maxLength) {
    $(this).next('.inputs').focus();
  }
});

JSFIDDLE链接

我很忙,但我用一个简单的方法解决了你的问题。

将Jquery更改为

(function (){
$("#num1, #num2, #num3, #num4").on("keydown", function (t) {
    //add the key's you want to accept such as backspace or arrow keys etc.
    if (t.keyCode != 13 && t.keyCode != 8 && t.keyCode != 37 && t.keyCode != 38 && t.keyCode != 39 && t.button != 1 && t.button != 2 && t.button != 3) {
    var maxlength = 4;
    var num1 = $("#num1").val().length;
    var num2 = $("#num2").val().length;
    var num3 = $("#num3").val().length;
    var num4 = $("#num4").val().length;
    $(this).val($(this).val().replace(/[^0-9'.]/g,''));
    if (num1 >= 4) {
    $("#num2").focus();
    }
    if(num1 >= 4 && num2 >= 4){
      $("#num3").focus();
    }
    if((num1 >= 4 && num2 >= 4) && num3 >= 4){
      $("#num4").focus();
    }
    if ((num1 >= 4 && num2) && (num3 >= 4 && num4)){
            $("#num4").val($("#num4").val().substr(0,3));
    }
    }
  });   
})();
http://jsfiddle.net/j42Jx/9/