Question

我试图像测验那样制作填字游戏，并且当输入字母时需要改变对输入的关注。问题是我可以改变对同一div中字段的关注

$(".inputs").keyup(function () {
    $(this).next().focus();
});

或两个div之间

$(':input').keyup(function (e) {
    if ($(this).val().length == $(this).attr('maxlength')) {
        $(this).closest('div').next().find(':input').first().focus();
    }
})

但是我不知道如果将焦点改为下一个输入，如果它在同一个div中，或者在另一个div中，则不知道如何改变焦点。

<div class="answer_1">
    <input class="inputs letter square border_orange" maxlength="1"  type="text" />
    <input class="inputs letter square border_orange" maxlength="1" type="text" />
</div>
<div class="answer_2">
    <input class="inputs letter square border_orange" maxlength="1"  type="text" />
    <input class="inputs letter square border_orange" maxlength="1" type="text" />
</div>

Html代码在上面，我试图在answer_1 div中的输入内首先改变输入焦点，当我在这里完成第二次输入时，在下一个div中自动改变对输入的关注。有什么建议吗？

Answer 1

您可以使用输入集合，并使用所单击元素的索引遍历它：

var $inputs = $(".inputs"); // get the collection of inputs

$inputs.keyup(function () {
  var index = $inputs.index(this); // get the index of the current input
  
  $inputs.eq(index + 1).focus(); // focus the next input
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="answer_1">
  <input class="inputs letter square border_orange" maxlength="1" type="text" />
  <input class="inputs letter square border_orange" maxlength="1" type="text" />

</div>
<div class="answer_2">
  <input class="inputs letter square border_orange" maxlength="1" type="text" />
  <input class="inputs letter square border_orange" maxlength="1" type="text" />

</div>

Answer 2

我假设你有一个form，因为你有输入字段。

$("input").keyup(function() {
  var inputs = $(this).closest('form').find(':input');
  inputs.eq(inputs.index(this) + 1).focus();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
  <div class="answer_1">
    <input class="inputs letter square border_orange" maxlength="1" type="text" />
    <input class="inputs letter square border_orange" maxlength="1" type="text" />

  </div>
  <div class="answer_2">
    <input class="inputs letter square border_orange" maxlength="1" type="text" />
    <input class="inputs letter square border_orange" maxlength="1" type="text" />

  </div>
</form>

Answer 3

可以编写代码以查看同一div中是否有任何控件。例如，可以使用以下代码。

$(".inputs").keyup(function() {
  if ($(this).val().length == $(this).attr('maxlength')) {
    if ($(this).next().length) {
      $(this).next().focus();
    } else {
      $(this).closest('div').next().find(':input').first().focus();
    }
  }
});

请参阅jsFiddle here。

Answer 4

你可以尝试这样的事情：通过为您的输入设置索引值来解决此问题：）

$(".inputs").keyup(function () {
    var thisEl = jQuery(this);
    var index = parseInt(thisEl.data('index'));
    if ($(this).val().length == $(this).attr('maxlength')) {
        index++;
        jQuery('.inputs[data-index="'+index+'"]').focus();
    }
});

<div class="answer_1">
    <input data-index="1" class="inputs letter square border_orange" maxlength="1"  type="text" />
    <input data-index="2" class="inputs letter square border_orange" maxlength="1" type="text" />
</div>
<div class="answer_2">
    <input data-index="3" class="inputs letter square border_orange" maxlength="1"  type="text" />
    <input data-index="4" class="inputs letter square border_orange" maxlength="1" type="text" />
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Answer 5

您可以使用以下

＆＃13;

$(".inputs").keyup(function () {
    if ( $(this).next().is("input") ) {
      alert("next child");
    } else {
      alert("next div");
    }
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="answer_1">
    <input class="inputs letter square border_orange" maxlength="1"  type="text" />
    <input class="inputs letter square border_orange" maxlength="1" type="text" />
</div>
<div class="answer_2">
    <input class="inputs letter square border_orange" maxlength="1"  type="text" />
    <input class="inputs letter square border_orange" maxlength="1" type="text" />
</div>

＆＃13;

输入焦点变化

5 个答案: