jQuery die Eingabe in das nächste Stb konzentrieren -> td wenn das td ein Eingabefeld enthält, aber nie die folgende html html wählen

Question

Ich habe konzentrieren:

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

Wenn der Benutzer in der Eingabe ‚a‘ und Drücken Sie die Tabulatortaste, ich habe es jetzt funktioniert, dass der Fokus auf Eingabe "b" geht. Sobald der Benutzer jedoch während der Eingabe von 'b' die Tabulatortaste betätigt, passiert nichts. Ich möchte, dass jQuery das Auswahlfeld 'c' überspringt und den Eingang 'd' fokussiert.

Im Moment benutze ich das und es funktioniert gut, aber es erlaubt dem Benutzer, die Auswahl in den Fokus Tab ... stattdessen möchte ich es ignorieren und versuchen und die Eingabe in der tr und td nach ihm konzentrieren:

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

Answer 1

Sie können -1 im Tab-Index verwenden, um es aus der Bestellung zu entfernen.

<select tabindex="-1"> 

Answer 2

Um alle Texteingaben mit TAB-Taste, eine Lösung zu verfahren ist:

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