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