web-dev-qa-db-fra.com

Onglet automatique jusqu'au prochain champ de saisie lorsque 4 caractères sont remplis

Ce que j'essaie de faire est de pointer sur l'onglet suivant lorsque vous remplissez quatre caractères. Chaque champ doit comporter 4 caractères et une fois rempli, il doit passer à la zone de saisie suivante.

 $(".inputs").keyup(function () {
        if (this.value.length == this.maxLength) {
          $(this).next('.inputs').focus();
        }
  });

Fiddle .

javascriptjqueryhtmlcss
20
Prasanga

Votre code fonctionne bien, mais vos éléments d’entrée sont définis sur type="number". Le contenu non numérique est ignoré. Par conséquent, si vous entrez "abcd", par exemple, le value de l'entrée est vide (ce qui signifie un length de 0). Si vous entrez "1234" en revanche, la valeur de l'entrée est 1234.

Si vous souhaitez que votre code se déclenche lorsque du contenu non numérique est entré, modifiez simplement le type de chaque entrée en text.

<input class="inputs" type="text" maxlength="4" />

JSFiddle demo .

Notez également que j'ai également supprimé l'attribut class en double de chacun de vos éléments dans cet exemple.

Comme krish a mentionné dans les commentaires de votre question, il existe un problème avec votre code car le dernier élément input continuera à accepter plus de 4 caractères. Pour résoudre ce problème, cochez la case suivante afin de vous assurer qu'il existe un élément next('.inputs'):

if (this.value.length == this.maxLength) {
  var $next = $(this).next('.inputs');
  if ($next.length)
      $(this).next('.inputs').focus();
  else
      $(this).blur();
}

JSFiddle demo .

27
James Donnelly

Peut-être avez-vous négligé de mettre votre code dans DOM ready. Jsfiddle inclut votre code dans $(window).load(function() { .....}) et c’est pourquoi il fonctionne. Donc, sur votre propre page, utilisez:

$(function() {
    $(".inputs").keyup(function () {
        if (this.value.length == this.maxLength) {
          $(this).next('.inputs').focus();
        }
    });
});

Dans jsfiddle, vous pouvez confirmer cela en sélectionnant No wrap - in <head>, puis cliquez sur Exécuter. Le code ne fonctionnera pas. Mais si vous utilisez ce qui précède, qui est inclus dans DOM ready, cela fonctionne.

1
PeterKA

Mon premier problème avec cela est que si vous parcourez des champs déjà remplis, vous devez les sélectionner manuellement. Je suggère ceci:

    $(".inputs").keyup(function () {
        if (this.value.length == this.maxLength) {
          $(this).next('.inputs').select(); 
        }
});

La solution du deuxième problème m'échappe. Fondamentalement, dans la même situation où les champs sont remplis précédemment, si vous tapez trop rapidement, les événements sont déclenchés en tant que tels: KeyDown KeyDown KeyUp KeyUp

Ce que cela provoque, est de sauter la prochaine entrée.

0
T.Schultz

Voici une version améliorée pour tous ceux qui en ont besoin pour un type d’informations fractionnées comme une clé de série ou quelque chose comme ça:

$(document).ready(function(){
    $(".amazonInput").keydown(function (e) {
        var code = e.which;
        $this=$(this);
        if ($this.val().length >=$this.data("maxlength") && code != 8) {
            if($this.val().length>$this.data("maxlength")){
                $this.val($this.val().substring(0,4));
            }
            $this.next(".amazonInput").focus();
        }
        if($this.val().length == 0 && code == 8) {
            $this.prev(".amazonInput").focus();
        }
    });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

0
Max Kern
<html>
<head>
    <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
    <Script>
        $(document).ready(function(){
            $(".inputs").keyup(function () {
                $this=$(this);
                if ($this.val().length >=$this.data("maxlength")) {
                  if($this.val().length>$this.data("maxlength")){
                    $this.val($this.val().substring(0,4));
                  }
                  $this.next(".inputs").focus();
                }
             });
        });
    </Script>
</head>
<body>
    <input type="text" class="inputs" data-maxlength="4">
    <input type="text" class="inputs" data-maxlength="4">
    <input type="text" class="inputs" data-maxlength="4">
    <input type="text" class="inputs" data-maxlength="4">
</body>

0
Mark Smit