如何使用tab键跳转到某个输入？

Question

目前，当用户在 qty 文本框中按 Tab 键时，它不会按 Tab 键切换到添加行图像。

我想添加一些 jQuery，以便当用户在 qty 文本框中按下 Tab 键时，它会切换到用户可以单击 Enter 的添加图像。

<td> 
    <input type="text" name="qty" id="qty" maxlength="3" class="txt" style="width: 80px;" />                         
</td>
<td> 
    <input type="image" src="/gfx/btn_addline.jpg" name="Add" value="Add" id="add"/>
</td>

Jquery影响数量：

 $("#qty").keydown(function (event) {
            //alert(event.keyCode);
            if (event.keyCode == 13) {
                $("#add").click();
                return false;
            }
        });
   $("#qty").keydown(function (event) {
            // Allow only backspace and delete
            if (event.keyCode == 46 || event.keyCode == 8) {
                // let it happen, don't do anything
            }
            else {
                // Ensure that it is a number and stop the keypress
                if ((event.keyCode < 48 || event.keyCode > 57) && (event.keyCode < 96 || event.keyCode > 105)) {
                    event.preventDefault();
                }
            }
        });

Answer 1

假设我正确理解了您的问题，您应该只使用 tabindex 属性，它不需要任何 JavaScript：

<input type="text" tabindex="1"> <!--First input-->
<input type="text" tabindex="2"> <!--Press tab, you will end up here-->

更新（参见评论）

如果您已经使用 tabindex 要控制页面上其他位置的 Tab 键顺序，只需在此处使用更高的索引即可。例如，如果索引 1-10 用于其他元素，请在此处使用 11 和 12：

<input type="text" tabindex="11"> <!--First input-->
<input type="text" tabindex="12"> <!--Press tab, you will end up here-->

更新 2（请参阅更新的问题）

您正在阻止 Tab 键在 keydown< 中执行任何操作/code> 事件处理程序。更改为以下内容（添加另一个检查 Tab 键的条件）：

if (event.keyCode == 46 || event.keyCode == 8 || event.keyCode == 9) {
    // let it happen, don't do anything
}

假设您的两个输入在代码中按顺序排列并且它们之间没有输入，则无需 tabindex 即可工作。如果有，也使用 tabindex。

作为旁注，您应该使用 event.which 而不是keyCode，因为 jQuery 使用它来规范浏览器的不一致。

Answer 2

我认为这可以解决问题

$("#qty").keyup(function(event){
  if(event.keyCode=='9') { //9 is the tab key
    $("#add").focus();
  }
});

Answer 3

$("#qty").keyup(function(event){
  if(event.keyCode=='9') { //9 is the tab key
    $("#add").focus();
    $("#add").select();
  }
});

您可以尝试将焦点和图像字段一起选择吗？