Question

我正在尝试允许用户在输入中输入1个字符，然后在输入字段中输入JUMP。

这样的工作原理如下：https://jsfiddle.net/ej9tvosj/1/

但是当我将输入放在div中时，该功能停止工作。

我的代码无法正常工作，但HTML部分不同。

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

Parent

有人可以就此问题提出建议吗？

Answer 1

您需要选择当前输入的父级＆amp;然后找到它的兄弟div＆amp;然后找到它的孩子输入

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

DEMO

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

您可以更改导航到 next 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>

jQuery跳转到下一个输入字段

3 个答案: