Wie fokusiert nächste Eingabefeld auf Tastendruck

Question

Ich mache eine mobile Anwendung. Ich möchte diese Funktion implementieren, wo beim Drücken der Taste das nächste Eingabefeld fokussiert wird. Ich habe viele Dinge ausprobiert, aber keiner scheint zu funktionieren. Das ist mein Code. Ich habe versucht mit onClick, aber wenn ich es berühre, geht es zum nächsten Feld.

<input type="number" class="mobile-verify pass" maxlength="1" name="code[]" /> 
<input type="number" class="mobile-verify pass" maxlength="1" name="code[]" /> 
<input type="number" class="mobile-verify pass" maxlength="1" name="code[]" /> 
<input type="number" class="mobile-verify pass" maxlength="1" name="code[]" /> 

Ich mag eine reine JQuery oder Javascript Lösung. Danke im Voraus.

Answer 1

Wie wäre:

$('input.mobile-verify.pass').on('keyup', function() { 
    if ($(this).val()) { 
     $(this).next().focus(); 
    } 
}); 

Wenn der Wert höher ist, fokussiere den nächsten. Mit keyup können Sie den Inhalt überprüfen und nicht sofort überspringen. Sie könnten beispielsweise bei iOS in den Zahlenmodus wechseln, der den Fokus auslöst, wenn Sie einfach den Tastendruck verwenden.

Codepen: http://codepen.io/anon/pen/qaGKzk

Answer 2

Try .keypress() & .focus() Funktionen in jQuery

https://api.jquery.com/keypress/

https://api.jquery.com/focus/

Answer 3

Versuchen:

$(".mobile-verify.pass").on("keypress", function(e){ 
    $(this).next().trigger("focus"); 
} 

Answer 4

Verwendung. keypress() und .focus()

Das Snippet:

$(document).ready(function(){ 
 
    $("input.mobile-verify.pass").keypress(function(){ 
 
    $(this).next().trigger('focus'); 
 
    //or $(this).next().focus(); \t 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<input type="number" class="mobile-verify pass" maxlength="1" name="code[]" /> 
 
<input type="number" class="mobile-verify pass" maxlength="1" name="code[]" /> 
 
<input type="number" class="mobile-verify pass" maxlength="1" name="code[]" /> 
 
<input type="number" class="mobile-verify pass" maxlength="1" name="code[]" />

Mit voll JS

var allElements = document.querySelectorAll('.mobile-verify.pass'); 
 
var i; 
 
for (i = 0; i < allElements.length; i++) { 
 
    var el = allElements[i]; 
 
    el.addEventListener("keypress", function() { 
 
    this.nextSibling.nextSibling.focus(); 
 
    }); 
 
}

<input type="number" class="mobile-verify pass" maxlength="1" name="code[]" /> 
 
<input type="number" class="mobile-verify pass" maxlength="1" name="code[]" /> 
 
<input type="number" class="mobile-verify pass" maxlength="1" name="code[]" /> 
 
<input type="number" class="mobile-verify pass" maxlength="1" name="code[]" />

NB:, wenn Sie fragen, warum 2 nextSibling, ist die Antwort, dass die erste Geschwister ist der Text den kleinen Raum zwischen zwei Elementen

Answer 5

JavaScript und Ereignisse keypress und focus und auch Fußnummern Validierung darstellt:

var elems = [].slice.call(document.querySelectorAll('.mobile-verify.pass')); 
 

 
elems.forEach(function(el, i, array) { 
 
    el.onkeypress = function(event) { 
 
    // Validate key is a number 
 
    var keycode = event.which; 
 
    if (!(event.shiftKey === false && 
 
     (keycode === 46 || keycode === 8 || keycode === 37 || keycode === 39 || 
 
     (keycode >= 48 && keycode <= 57)))) { 
 
     return; 
 
    } 
 

 
    var nextInput = i + 1; 
 
    if (nextInput < array.length) { 
 
     array[nextInput].focus(); 
 
    } 
 
    }; 
 
});

<input type="number" class="mobile-verify pass" maxlength="1" name="code[]" /> 
 
<input type="number" class="mobile-verify pass" maxlength="1" name="code[]" /> 
 
<input type="number" class="mobile-verify pass" maxlength="1" name="code[]" /> 
 
<input type="number" class="mobile-verify pass" maxlength="1" name="code[]" />