当TD包含输入字段时，jQuery将输入集中在下一个tr-> td上，但不要将html select集中

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

现在我使用它，它可以正常工作，但是它允许用户将选择标签到焦点上……相反，我希望它忽略选择并尝试将输入的焦点放在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>