jQueryのは、次のTRでの入力を集中は - > TDは、そのTDは、入力フィールドが含まれていますが、HTMLが選択集中したことがないとき

Question

I持って、次の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> 

、ユーザが入力している場合は「」とタブキーを押すと、フォーカスが入力 'b'に変わるようになった。ただし、入力 'b'の間にユーザーがタブを移動すると、何も起こりません。私は、jQueryが選択フィールド 'c'をスキップし、フォーカス入力 'd'をしたいと思います。

今私はこれを使用し、うまく動作しますが、フォーカスを選択するタブをユーザーに許可します...代わりに私はそれを無視して、tryとtdの入力をフォーカスしてみてください。

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

Answer 1

タブインデックスで-1を使用すると、オーダーから削除できます。 TABキーでソリューションをすべてのテキスト入力をトラバースするために

<select tabindex="-1"> 

Answer 2

は次のとおりです。魔法のよう

$(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>