jquery - 自动聚焦 div 内的下一个输入

Question

<td><div class="col-xs-3"><input type="text" maxlength="3"/></div>
<div class="col-xs-3"><input type="text" maxlength="3"/></div>
<div class="col-xs-3"><input type="text" maxlength="3"/></div>
<div class="col-xs-3"><input type="text" maxlength="3"/></div></td>

我的设计结构如上所述，现在我的问题是我无法自动聚焦下一个输入。可能div有冲突。

$(document).ready(function(){
  $('input').keyup(function(){
    if ($(this).val().length == $(this).attr("maxlength")) {
      $(this).next().focus();
    }
  });
});

我的代码是这样的，当我删除输入之间的 div 时，它运行良好。但我的输入不再对齐。请帮忙，提前致谢

Answer 1

input 元素不是同级元素，因此 next() 将不起作用。

您需要获取当前输入的父 div，转到下一个 div，然后在其中查找输入:

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tr>
    <td>
      <div class="col-xs-3"><input type="text" maxlength="3" /></div>
      <div class="col-xs-3"><input type="text" maxlength="3" /></div>
      <div class="col-xs-3"><input type="text" maxlength="3" /></div>
      <div class="col-xs-3"><input type="text" maxlength="3" /></div>
    </td>
  </tr>
</table>