Jquery: Erzwinge Cursor in das nächste Eingabefeld?

Question

Ich habe 4 Eingabefelder nebeneinander.

Ich versuche, den Benutzer zu zwingen, 1 Zeichen pro Eingabefeld einzugeben und sobald sie 1 Zeichen eingegeben haben, müssen sie das nächste Zeichen in das nächste Feld eingeben, bis die Eingaben abgeschlossen sind.

Allerdings ist mein aktueller Code al über den Ort und ich kann nicht herausfinden, was ich tun muss, um dies zu erreichen.

Dies ist mein Code:

https://jsfiddle.net/ej9tvosj/

$('.inps').keydown(function (event) { 
    // check for hyphen 
var myLength = $(this).val().length; 

if(myLength ==0){ 
$(this).next('.inps').focus(); 
} 


}); 

, wenn Sie etwas in der ersten eingeben, wird es in das nächste Feld springen, aber es wird dort nach bekommen vermasselt.

Könnte jemand bitte Beratung zu diesem Thema?

Answer 1

Sie müssen on input Zuhörer versuchen Änderung des Eingangs zu erkennen, statt keyup da Sie müssen Stellen Sie sicher, dass ein Zeichen eingegeben wird, bevor Sie den Fokus ändern.

$(document).on('input', '.inps', function (event) { 
 
    // check for hyphen 
 
\t var myLength = $(this).val().trim().length; 
 
    if(myLength ==1){ 
 
    $(this).next('.inps').focus(); 
 
    } 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<input type="text" class="inps" > 
 
<input type="text" class="inps" > 
 
<input type="text" class="inps" > 
 
<input type="text" class="inps" >

Answer 2

können Sie vergleichen den myLength Wert mit 1 wie im Code-Snippet:

$('.inps').keydown(function (event) { 
 
    // check for hyphen 
 
var myLength = $(this).val().length; 
 

 
if(myLength ==1){ 
 
$(this).next('.inps').focus(); 
 
} 
 

 

 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<input type="text" class="inps" > 
 
<input type="text" class="inps" > 
 
<input type="text" class="inps" > 
 
<input type="text" class="inps" >