Question

我有以下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();
  }
})

事件触发，但焦点不会改变。我尝试从表单字段之间删除标记，这也无济于事。

Answer 1

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

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

1 个答案: