Question

我要做的是，填写四个字符时指向下一个标签。每个字段应该有4个字符，一旦完成，它应该移动到下一个输入框。

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

Fiddle

Answer 1

您的代码运行正常，但您的输入元素设置为type="number"。非数字内容将被忽略，因此，例如，如果输入“abcd”，则输入value为空（表示length 0）。另一方面，如果输入“1234”，则输入值为1234。

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

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

JSFiddle demo

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

关于您的问题krish has mentioned in the comments，您的代码存在问题，即最后一个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 demo

Answer 2

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

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

在jsfiddle中，您可以选择No wrap - in <head>确认，然后点击“运行”。代码不起作用。但如果您使用上面附带在DOM中的内容，它就可以工作。

Answer 3

<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>

Answer 4

这是一个改进的版本，适用于所有需要这种类型的分裂信息的人，例如串行密钥或类似的东西：

＆＃13;

<div class="hoverover">Hover Over Me</div>

<ul class="circles">
  <li class="circle"></li>
  <li class="circle"></li>
  <li class="circle"></li>
</ul>

＆＃13;

$(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();
        }
    });
});

＆＃13;

Answer 5

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

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

第二个问题的解决方案让我感到震惊。基本上，在先前填充字段的情况相同的情况下，如果键入太快，事件将会触发：KeyDown KeyDown KeyUp KeyUp

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

填充4个字符时自动选项卡到下一个输入字段

5 个答案: