web-dev-qa-db-ger.com

Auto-Tab zum nächsten Eingabefeld, wenn 4 Zeichen eingegeben werden

Was ich versuche zu tun ist, zeigen Sie auf die nächste Registerkarte, wenn Sie vier Zeichen eingeben. Jedes Feld sollte aus 4 Zeichen bestehen und sobald es ausgefüllt ist, sollte es zum nächsten Eingabefeld gelangen.

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

Fiddle .

javascriptjqueryhtmlcss
20
Prasanga

Ihr Code funktioniert gut, Ihre Eingabeelemente sind jedoch als type="number" festgelegt. Nicht numerischer Inhalt wird ignoriert. Wenn Sie beispielsweise "abcd" eingeben, ist die value der Eingabe leer (dh eine length von 0). Wenn Sie dagegen "1234" eingeben, lautet der Wert der Eingabe 1234.

Wenn Sie möchten, dass Ihr Code ausgelöst wird, wenn nicht numerischer Inhalt eingegeben wird, ändern Sie einfach den Eingabetyp in text.

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

JSFiddle Demo .

Beachten Sie, dass ich auch das doppelte class-Attribut aus jedem Ihrer Elemente in diesem Beispiel entfernt habe.

Wie krish in den Kommentaren zu Ihrer Frage erwähnt hat, besteht ein Problem mit Ihrem Code darin, dass das letzte input-Element weiterhin mehr als 4 Zeichen akzeptiert. Um dies zu beheben, setzen Sie einen Haken, um sicherzustellen, dass es ein next('.inputs')-Element gibt:

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

Vielleicht haben Sie es versäumt, Ihren Code in DOM ready einzureichen. Jsfiddle schließt Ihren Code in $(window).load(function() { .....}) ein, und deshalb funktioniert es. Also auf deiner eigenen Seite verwenden:

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

Im jsfiddle können Sie dies bestätigen, indem Sie No wrap - in <head> auswählen und dann auf Ausführen klicken. Der Code wird nicht funktionieren. Wenn Sie jedoch das oben genannte verwenden, was in DOM ready enthalten ist, funktioniert es.

1
PeterKA

Mein erstes Problem dabei war, dass Sie beim Durchblättern von Feldern, die bereits ausgefüllt sind, jedes Feld manuell auswählen müssen. Ich schlage folgendes vor:

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

Die Lösung des zweiten Problems entgeht mir. Grundsätzlich werden in der gleichen Situation, in der Felder zuvor gefüllt wurden, die Ereignisse als solche ausgelöst, wenn Sie zu schnell eingeben: KeyDown KeyDown KeyUp KeyUp

Was dies bewirkt, ist das Überspringen der nächsten Eingabe.

0
T.Schultz

Hier ist eine verbesserte Version für alle, die dies für aufgespaltete Informationen wie einen Serienschlüssel oder ähnliches benötigen:

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