Question

我有以下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'并按Tab键，我现在可以将其重点放在输入'b'上。但是，一旦用户在输入'b'中进行选项卡，就不会发生任何事情。我希望jQuery跳过选择字段'c'并将焦点输入'd'。

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

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

Answer 1

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

<select tabindex="-1">

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

jQuery将输入集中在下一个tr - ＆gt; td当td包含输入字段，但从不关注html选择

2 个答案: