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>

Answer 2

那是因为输入元素不是兄弟，他们的父div是。

你需要遍历父div，然后是下一个兄弟div然后在其中找到输入：

$(this).closest('.col-xs-3').next().find('input').focus();

请确保添加检查以查看是否存在下一个div。在找到输入元素之前。否则这将在最后一个div的情况下抛出错误。像这样的东西：

var $nextCloX3 = $(this).closest('.col-xs-3').next();
if($nextCloX3.length > 0)
   $nextCloX3.find('input').focus();

$('input').keyup(function() {
  if ($(this).val().length == $(this).attr("maxlength")) {
    var $nextCloX3 = $(this).closest('.col-xs-3').next();
    if($nextCloX3.length > 0)
     $nextCloX3.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>

Answer 3

问题是在该上下文中，this是input但next

中没有div

所以改成它：

// get this, go the parent div, go to next div, find the input, focus
$(this).parent().next().find('input').focus();

https://jsfiddle.net/mwgdLuuy/1/

Answer 4

next（）没有引用下一个输入，所以你可以这样做。希望它有所帮助！

＆＃13;

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

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<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>

＆＃13;

在div内自动对焦下一个输入

4 个答案: