一旦輸入了兩個數字，自動標籤到下一個輸入字段

我正在創建一個表單，這個表單的一部分是三個字段，每個字段需要輸入兩個數字。當有人在第一個字段中輸入兩位數字時，我希望他們自動移動到第二個字段，然後在第二個字段中輸入兩個數字時移動到第三個字段。一旦輸入了兩個數字，自動標籤到下一個輸入字段

這裏是我的代碼 - 遺憾的是它不工作，我會是任何幫助非常感激：

<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

一旦輸入了兩個數字，自動標籤到下一個輸入字段

回答

相關問題