用箭头改变焦点

Question

我在JavaScript中使用箭头键跟随Shift焦点，但这对我不起作用。
有其他方法可以使用制表符在输入字段之间更改焦点吗？

$(document).keydown(function(e) {
if (e.keyCode == 39) {
$(".move:focus").next().focus();
}
if (e.keyCode == 37) {
$(".move:focus").prev().focus();
}
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="table" class="table table-bordered table-hover dataTable" style="width:100%">
<thead>
<tr>
<th>RM Code</th>
<th style="width:10%">Wh</th>
<th style="width:10%">Quantity<br>Recipe</th>
<th style="width:10%">Weight/<br>Mixer</th>
<th style="width:10%">No of<br>Weighting</th>
<th style="width:10%">Qty Used<br>Actual</th>
</tr>
</thead>
<tbody>
<tr class="details">
<td>
<input type="text" id="rm_code[]" name="rm_code[]" placeholder="Enter your Name" class="form-control move" />
</td>
<td>
<input type="text" id="wh[]" name="wh[]" placeholder="Enter your Name" class="form-control move" />
</td>
<td>
<input type="text" id="quantity_recipe[]" name="quantity_recipe[]" placeholder="Enter your Name" class="form-control move" />
</td>
<td>
<input type="text" id="weight_mixer[]" name="weight_mixer[]" placeholder="Enter your Name" class="form-control move" />
</td>
<td>
<input type="text" id="no_of_weighting[]" name="no_of_weighting[]" placeholder="Enter your Name" class="form-control move" />
</td>
<td>
<input type="text" id="qty_used_actual[]" name="qty_used_actual[]" placeholder="Enter your Name" class="form-control move" />
</td>
</tr>
</tbody>
</table>

Answer 1

jQuery的next()选择"紧随其后的同级"。在HTML中，<input>元素不是兄弟元素，因为每个元素都在自己的父<td>中。

但是，<td>元素是的同级元素。因此，您可以从关注的<input>遍历到其包含的<td>，再遍历到其子级<input>的下一个同级<td>。

一种方法是使用parent()来选择当前<td>，使用next()来选择下一个同级<td>，以及使用find()来选择子<input>。

这里有一个演示：

$(document).keydown(function(e) {
if (e.keyCode == 39) {
$(".move:focus").parent().next().find(".move").focus();
}
if (e.keyCode == 37) {
$(".move:focus").parent().prev().find(".move").focus();
}
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="table" class="table table-bordered table-hover dataTable" style="width:100%">
<thead>
<tr>
<th>RM Code</th>
<th style="width:10%">Wh</th>
<th style="width:10%">Quantity<br>Recipe</th>
<th style="width:10%">Weight/<br>Mixer</th>
<th style="width:10%">No of<br>Weighting</th>
<th style="width:10%">Qty Used<br>Actual</th>
</tr>
</thead>
<tbody>
<tr class="details">
<td>
<input type="text" id="rm_code[]" name="rm_code[]" placeholder="Enter your Name" class="form-control move" />
</td>
<td>
<input type="text" id="wh[]" name="wh[]" placeholder="Enter your Name" class="form-control move" />
</td>
<td>
<input type="text" id="quantity_recipe[]" name="quantity_recipe[]" placeholder="Enter your Name" class="form-control move" />
</td>
<td>
<input type="text" id="weight_mixer[]" name="weight_mixer[]" placeholder="Enter your Name" class="form-control move" />
</td>
<td>
<input type="text" id="no_of_weighting[]" name="no_of_weighting[]" placeholder="Enter your Name" class="form-control move" />
</td>
<td>
<input type="text" id="qty_used_actual[]" name="qty_used_actual[]" placeholder="Enter your Name" class="form-control move" />
</td>
</tr>
</tbody>
</table>

---

如果HTML结构可能发生变化，请考虑更具体的选择器：

$(".move:focus").closest("td").next().find(".move").focus();