jQuery跳至下一個輸入字段

Question

我試圖允許用戶在輸入中輸入1個字符，然后在輸入字段中輸入J​​UMP。

這是這樣的： https : //jsfiddle.net/ej9tvosj/1/

但是，當我將輸入放入divs時，該功能停止工作。

https://jsfiddle.net/ej9tvosj/2/

我的無效代碼與有效代碼相同，但HTML部分不同。

 $(document).on('input', '.inps', function(event) { $(this).attr('type', 'tell'); function showpanel() { $('.inps').attr('type', 'password'); $(this).attr('type', 'tell'); } // use setTimeout() to execute setTimeout(showpanel, 1000); // check for hyphen var myLength = $(this).val().trim().length; if (myLength == 1) { $(this).next('.inps').focus(); $(this).next('.inps').val(''); } }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="form-group"> <label for="inps">enter number</label> <br> <div class="split4"> <input type="tell" class="form-control inps" maxlength="1"> </div> <div class="split4"> <input type="tell" class="form-control inps" maxlength="1"> </div> <div class="split4"> <input type="tell" class="form-control inps" maxlength="1"> </div> <div class="split4"> <input type="tell" class="form-control inps" maxlength="1"> </div> </div> 

有人可以建議這個問題嗎？

Answer 1

您需要選擇當前輸入的父級，然后找到它的同級div ，然后找到它的子級輸入

 $(this).parent().next('div.split4').find('input').focus();

演示

Answer 2

原因是使用了jQuery next函數。 這里是官方文檔：

描述：獲取匹配元素集中每個元素的緊隨其后的同級。 如果提供了選擇器，則僅當與該選擇器匹配時才檢索下一個同級。

之后，您用div包裹了所有的代碼，它們不再是同級的，這就是為什么這段代碼不再起作用的原因：

$(this).next('.inps').focus();

只需使用以下命令進行更改：

$(this).parent().next('.split4').find('input').focus();

 $(document).on('input', '.inps', function(event) { $(this).attr('type', 'tell'); function showpanel() { $('.inps').attr('type', 'password'); $(this).attr('type', 'tell'); } // use setTimeout() to execute setTimeout(showpanel, 1000); // check for hyphen var myLength = $(this).val().trim().length; if (myLength == 1) { $(this).parent().next('.split4').find('input').focus(); $(this).parent().next('.split4').find('input').val(''); } }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="form-group"> <label for="inps">enter number</label> <br> <div class="split4"> <input type="tell" class="form-control inps" maxlength="1"> </div> <div class="split4"> <input type="tell" class="form-control inps" maxlength="1"> </div> <div class="split4"> <input type="tell" class="form-control inps" maxlength="1"> </div> <div class="split4"> <input type="tell" class="form-control inps" maxlength="1"> </div> </div> 

Answer 3

您可以更改導航至下一個 input ，可以使用closest find下一個input -請參見下面的演示：

 $(document).on('input', '.inps', function (event) { $(this).attr('type', 'tell'); function showpanel() { $('.inps').attr('type', 'password'); $(this).attr('type', 'tell'); } // use setTimeout() to execute setTimeout(showpanel, 1000); // check for hyphen var myLength = $(this).val().trim().length; if(myLength ==1){ $(this).closest('.split4').next('.split4').find('.inps').focus().val(''); } }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="form-group"> <label for="inps">enter number</label> <br> <div class="split4"> <input type="tell" class="form-control inps" maxlength="1"> </div> <div class="split4"> <input type="tell" class="form-control inps" maxlength="1"> </div> <div class="split4"> <input type="tell" class="form-control inps" maxlength="1"> </div><div class="split4"> <input type="tell" class="form-control inps" maxlength="1"> </div> </div>