当填充4个字符时，自动制表到下一个输入字段

Auto tab to next input field when fill 4 characters

本文关键字：下一个 字段 输入 4个 填充 字符      更新时间：2023-09-26

我要做的是，在填充四个字符时指向下一个选项卡。每个字段应该有4个字符，完成后应该移到下一个输入框。

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

Fiddle。

您的代码运行良好，但是您的输入元素设置为type="number"。非数字内容将被忽略，因此，例如，如果输入"abcd"，则输入的value为空(意味着0的length(。另一方面，如果输入"1234"，则输入的值为1234。

如果希望在输入非数字内容时激发代码，只需将每个输入的类型更改为text即可。

<input class="inputs" type="text" maxlength="4" />

JSFiddle演示。

注意，在该示例中，我还从每个元素中删除了重复的class属性。

正如krish在对您的问题的评论中所提到的，您的代码存在一个问题，即最后一个input元素将继续接受超过4个字符。要解决此问题，请进行检查以确保存在next('.inputs')元素：

if (this.value.length == this.maxLength) {
  var $next = $(this).next('.inputs');
  if ($next.length)
      $(this).next('.inputs').focus();
  else
      $(this).blur();
}

JSFiddle演示。

也许您忽略了将代码封装在DOM中。Jsfidle将您的代码封装在$(window).load(function() { .....})中，这就是它工作的原因。所以在你自己的页面上使用：

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

在jsfiddle中，您可以通过选择No wrap - in <head>然后单击run来确认这一点。该代码将不起作用。但是，如果您使用上面包含在DOM ready中的内容，它是有效的。

<html>
<head>
    <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
    <Script>
        $(document).ready(function(){
            $(".inputs").keyup(function () {
                $this=$(this);
                if ($this.val().length >=$this.data("maxlength")) {
                  if($this.val().length>$this.data("maxlength")){
                    $this.val($this.val().substring(0,4));
                  }
                  $this.next(".inputs").focus();
                }
             });
        });
    </Script>
</head>
<body>
    <input type="text" class="inputs" data-maxlength="4">
    <input type="text" class="inputs" data-maxlength="4">
    <input type="text" class="inputs" data-maxlength="4">
    <input type="text" class="inputs" data-maxlength="4">
</body>

这里有一个改进的版本，适用于所有需要它来处理某种分离信息的人，比如串行密钥或类似的东西：

$(document).ready(function(){
    $(".amazonInput").keydown(function (e) {
        var code = e.which;
        $this=$(this);
        if ($this.val().length >=$this.data("maxlength") && code != 8) {
            if($this.val().length>$this.data("maxlength")){
                $this.val($this.val().substring(0,4));
            }
            $this.next(".amazonInput").focus();
        }
        if($this.val().length == 0 && code == 8) {
            $this.prev(".amazonInput").focus();
        }
    });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

我的第一个问题是，如果在已经填充的字段中切换，则必须手动选择每个字段。我建议这样做：

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

第二个问题的解决方案让我无法理解。基本上，在之前填充字段的相同情况下，如果你键入得太快，事件会像这样触发：KeyDown KeyDown KeyUp KeyUp

这会导致跳过下一个输入。

对于那些尝试过接受答案，但找不到像我这样的解决方案的人

在布局页面或页眉中，只需输入ajax库链接(如下图所示(

它对我起了作用，希望它也能帮助你。

$(".inputs").keyup(function () {
    if (this.value.length == this.maxLength) {
      var $next = $(this).next('.inputs');
      if ($next.length)
          $(this).next('.inputs').focus();
      else
          $(this).blur();
    }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<input class="inputs" type="text" maxlength="4" style="font-size:10px" />
<input class="inputs" type="text" maxlength="4" style="font-size:10px" />
<input class="inputs" type="text" maxlength="4"  style="font-size:10px" />

</body>

我发现代码在序列号有多个输入框的honCode脚本中运行得很好。

纯JS：

function onchechnge(i){
    var dom = document.getElementById("key"+i);
    var ml = dom.maxLength;
    var lg = dom.value.length;
    if (lg >= ml) {
        document.getElementById("key"+(i+1)).focus()
    }
}

HTML:

<fieldset id=serialkey>
    <input name=key1 id=key1 onkeypress="onchechnge(1)" type=text size=3 maxlength=5> 
    <input name=key2 id=key2 onkeypress="onchechnge(2)" type=text size=3 maxlength=5>
    <input name=key3 id=key3 onkeypress="onchechnge(3)" type=text size=3 maxlength=5>
    <input name=key4 id=key4 onkeypress="onchechnge(4)" type=text size=3 maxlength=5> 
    <input name=key5 id=key5 type=text size=3 maxlength=5>
</fieldset>
相关文章：