一旦输入了两个数字，自动标签到下一个输入字段

我正在创建一个表单，这个表单的一部分是三个字段，每个字段需要输入两个数字。当有人在第一个字段中输入两位数字时，我希望他们自动移动到第二个字段，然后在第二个字段中输入两个数字时移动到第三个字段。一旦输入了两个数字，自动标签到下一个输入字段

这里是我的代码 - 遗憾的是它不工作，我会是任何帮助非常感激：

<div class="en__field__element en__field__element--tripletext"> 
    <div class="en__field__item"> 
     <input id="en__field_supporter_NOT_TAGGED_11" type="text" class="en__field__input en__field__input--tripletext" name="supporter.NOT_TAGGED_11" value="" maxlength="2"> 
    </div> 
    <div class="en__field__item"> 
     <input type="text" class="en__field__input en__field__input--tripletext" name="supporter.NOT_TAGGED_11" value="" maxlength="2"> 
    </div> 
    <div class="en__field__item"> 
     <input type="text" class="en__field__input en__field__input--tripletext" name="supporter.NOT_TAGGED_11" value="" maxlength="2"> 
    </div> 
</div> 

$(".en__field__input.en__field__input--tripletext").keyup(function() { 
if (this.value.length == this.maxLength) { 
    var $next = $(this).next('.en__field__input.en__field__input--tripletext'); 
    if ($next.length) 
     $(this).next('.en__field__input.en__field__input--tripletext').focus(); 
    else 
     $(this).blur(); 
} 
});

来源

2017-08-07 Glyn Thomas

尝试触发所期望的字段中的 “焦点” -event。 JQuery为此提供了“trigger（）”函数。对于您的实际解决方案：尝试检查是否可以使用您的实际jQuery选择器访问所需的elemnent – unherz

.next()不仅看起来兄弟姐妹中。在你的情况下，该字段在父母的兄弟姐妹中，所以你必须得到父母的下一个兄弟才能找到下一个输入。

在旁注中，您可能想要跳过某些键控事件中的键控代码（例如箭头键）。

实施例：

$(".en__field__input.en__field__input--tripletext").keyup(function() { 
 
    if (this.value.length == this.maxLength) { 
 

 
    $(this) 
 
     .blur() 
 
     .parent() 
 
     .next() 
 
     .children('.en__field__input.en__field__input--tripletext') 
 
     .focus(); 
 
    } 
 
    
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="en__field__element en__field__element--tripletext"> 
 
    <div class="en__field__item"> 
 
    <input id="en__field_supporter_NOT_TAGGED_11" type="text" class="en__field__input en__field__input--tripletext" name="supporter.NOT_TAGGED_11" value="" maxlength="2"> 
 
    </div> 
 
    <div class="en__field__item"> 
 
    <input type="text" class="en__field__input en__field__input--tripletext" name="supporter.NOT_TAGGED_11" value="" maxlength="2"> 
 
    </div> 
 
    <div class="en__field__item"> 
 
    <input type="text" class="en__field__input en__field__input--tripletext" name="supporter.NOT_TAGGED_11" value="" maxlength="2"> 
 
    </div> 
 
</div>

来源

2017-08-07 05:39:43 H77

一旦输入了两个数字，自动标签到下一个输入字段

回答

相关问题