当 td 包含输入字段时，jQuery 将输入焦点放在下一个 tr -> td 中，但从不关注 html select答案

【问题标题】：jQuery focus the input in the next tr -> td when that td contains an input field, but never focus html select当 td 包含输入字段时，jQuery 将输入焦点放在下一个 tr -> td 中，但从不关注 html select
【发布时间】：2016-05-01 13:08:05
【问题描述】：

我有以下html：

<tr>
  <td>Name</td><td><input type="text" name="a"></td>
</tr>
<tr>
  <td>Address</td><td><input type="text" name="b"></td>
</tr>
<tr>
  <td>Type</td><td><select name="c"></td>
</tr>
<tr>
  <td>Gender</td><td><input type="text" name="d"></td>
</tr>

如果用户在输入“a”并按下制表键，我现在可以正常工作，因为焦点转到输入“b”。但是，一旦用户在输入“b”中进行选项卡，则什么也不会发生。我希望 jQuery 跳过选择字段“c”并聚焦输入“d”。

现在我使用它并且它工作正常，但它允许用户将选择选项卡到焦点...而不是我希望它忽略选择并尝试将输入集中在 tr 和 td 之后：

$(this).closest('tr').next().find('input:text').first().focus();

【问题讨论】：

标签： javascript jquery input html-table focus

【解决方案1】：

您可以在标签索引中使用 -1 将其从订单中删除。

<select tabindex="-1">

【讨论】：

【解决方案2】：

为了使用 TAB 键遍历所有文本输入，解决方案是：

$(function () {
  $(':text').on('keydown', function (e) {
    var keyCode = e.keyCode || e.which;
    if (keyCode == 9) { // on tab go to next input
      // prevent the default action
      e.preventDefault();
      
      // select the next row containing a text input field (skip select!)
      // and get the first element
      var nextInput = $(e.target).closest('tr').nextAll('tr').filter(function(index, element) {
        return $(element).find(':text').length > 0;
      }).first().find(':text');
      
      // if next input exists go there, else go to the first one
      if (nextInput.length == 0) {
        $(':text:first').focus();
      } else {
        nextInput.focus();
      }
    }
    return false;
  });

});

<script src="https://code.jquery.com/jquery-1.12.3.min.js"></script>

<table>
    <tr>
        <td>Name</td>
        <td><input type="text" name="a"></td>
    </tr>
    <tr>
        <td>Adress</td>
        <td><input type="text" name="b"></td>
    </tr>
    <tr>
        <td>Type</td>
        <td><select name="c"></td>
    </tr>
    <tr>
        <td>Gender</td>
        <td><input type="text" name="d"></td>
    </tr>
</table>

【讨论】：