无法使用 jQuery 传递焦点下一个输入

Posted 2023-02-25

【中文标题】无法使用 jQuery 传递焦点下一个输入

【英文标题】：Unable to pass focus next input with jQuery

【发布时间】：2014-11-25 23:06:15

【问题描述】：

我有以下 html：

<table>
<tr><td><input id="startMonth" placeholder="MM" class="dateInput"></td><td>/</td><td><input id="startDay" placeholder="DD" class="dateInput"></td><td>/</td><td><input id="startYear" placeholder="YY" class="dateInput"></td></tr>
<tr><td><input id="endMonth" placeholder="MM" class="dateInput"></td><td>/</td><td><input id="endDay" placeholder="DD" class="dateInput"></td><td>/</td><td><input id="endYear" placeholder="YY" class="dateInput"></td></tr>
</table>

使用以下 jQuery 脚本：

$('.dateInput').on('keyup', function () 
  if (this.value.length >= 2) 
    $(this).nextAll('input').first().focus();
  
)

事件触发，但焦点没有改变。我尝试从表单字段之间删除标签，但这也没有帮助。

【问题讨论】：

可能重复***.com/questions/10539113/…

事件在我想要的时候触发。问题是焦点没有改变。我的临时解决方法是将 keyup 事件单独绑定到每个字段，并使用它们的 ID 手动将焦点设置到字段。

【参考方案1】：

问题是.nextAll() 不是正确的方法，.next() 也不是。这些方法对兄弟元素进行操作。在这种情况下，输入是 td 元素的子元素，而这些元素又是 tr 的子元素。

index() 和 .eq() 方法在这里会很有帮助。但是，您可能需要调整最后一个元素的逻辑，因为没有下一个元素可以跳转。

$('.dateInput').on('keyup', function () 
  if (this.value.length >= 2) 
    var index = $('.dateInput').index( this ) + 1;
    $('.dateInput').eq( index ).focus();
  
)

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table>
<tr><td><input id="startMonth" placeholder="MM" class="dateInput"></td><td>/</td><td><input id="startDay" placeholder="DD" class="dateInput"></td><td>/</td><td><input id="startYear" placeholder="YY" class="dateInput"></td></tr>
<tr><td><input id="endMonth" placeholder="MM" class="dateInput"></td><td>/</td><td><input id="endDay" placeholder="DD" class="dateInput"></td><td>/</td><td><input id="endYear" placeholder="YY" class="dateInput"></td></tr>
</table>

【讨论】：

太棒了！我提供了一些解释；如果您有任何具体问题，请告诉我。 ...简而言之，输入元素不是兄弟姐妹；这就是为什么你的方法不起作用的原因。