web-dev-qa-db-fra.com

Comment focaliser le prochain champ de saisie sur la touche

Je crée une application mobile. Je souhaite implémenter cette fonction où, en appuyant sur la touche, le prochain champ de saisie est ciblé. J'ai essayé beaucoup de choses mais aucune ne semble fonctionner. Ceci est mon code. J'ai essayé d'utiliser onClick, mais lorsque je le touche, il passe au champ suivant.

<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[]" />

Je veux une solution pure Jquery ou Javascript . Merci d'avance.

javascriptjqueryhtml
15
Ali Zia

Que diriez-vous:

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

Donc, touche en haut, s'il y a une valeur, concentrez-vous sur la suivante. L'utilisation de keyup vous permet de valider le contenu plutôt que de sauter immédiatement. Par exemple, ils pourraient basculer en mode numérique sur iOS, ce qui déclencherait la mise en évidence si vous utilisiez simplement le clavier.

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

15
OK sure

Utilisez .next() et .trigger() :

$(".mobile-verify.pass").on("keypress", function(e){
  $(this).next().trigger("focus");
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

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

Note latérale: Trouvez une autre solution pour la fonctionnalité d'attribut maxlength, comme indiqué dans maxlength ignoré pour le type d'entrée = "numéro"

17
wscourge

Utilisez . les touches () et .focus ()

L'extrait: 

$(document).ready(function (){
  $("input.mobile-verify.pass").keypress(function(){
    $(this).next().trigger('focus');
    //or $(this).next().focus();	
  });
});
<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[]" />

Avec full 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: si vous demandez pourquoi 2 nextSibling, la réponse est que le premier frère est le texte représentant le petit espace entre 2 éléments

3
Aroniaina

Essayez les fonctions .keypress () et .focus () dans jQuery

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

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

3
Rahul Salvi

JavaScript et les événements keypress et focus ainsi que la validation des numéros de clé: 

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[]" />

3
Yosvel Quintero

D'autres ont déjà écrit les solutions. Je voulais juste ajouter que la partie 

[].slice.call

est ce qui a résolu mon problème. Je ne pouvais pas concentrer un élément car il était de type Element et non pas HtmlElement. Mais d’une manière ou d’une autre, cette partie du code est en train de convertir ma liste d’éléments querySelectorAll en HtmlElements.

Merci Yosvel Quintero

0
Marcus Ekström