Wie verschiebe ich den Cursor in Javascript automatisch zum nächsten Textfeld, wenn der aktuelle voll ist?

Question

Angenommen, ich auf meiner Web-Seite zwei HTML-Textfelder haben:

<input type='text' id='txt1' maxlength='5' /> 
<input type='text' id='txt2' maxlength='5' /> 

Jede Textbox ermöglicht es dem Benutzer zu fünf Zeichen eingeben werden. Wie kann ich Javascript mit oder ohne jQuery verwenden, um den Cursor automatisch von txt1 nach txt2 zu verschieben, wenn der Benutzer fünf Zeichen in txt1 eintippt?

$('#txt1').keyup(function() { 
    if(this.value.length == $(this).attr('maxlength')) { 
     $('#txt2').focus(); 
    } 
}); 

Aber es gibt es einige Usability Feinheiten können Sie nicht über oder Pflege:

Answer 1

Eine grundlegende Implementierung so sein würde. Wenn das oben genannte nicht ausreicht, gibt es viele jQuery-Plugins, die das für Sie erledigen.

Answer 2

Die Idee ist, das keydown Ereignis zu behandeln und zu überprüfen, ob die maximale Länge erreicht worden ist; Wenn ja, fokussieren Sie das nächste Steuerelement.

document.getElementById('txt1').onkeydown = function() { 
    if (this.value.length == this.maxLength) 
    document.getElementById('txt2').focus(); 
} 

Answer 3

Es heißt autotabbing, und es gibt viele Plugins, die bereits für jquery existieren, die dies tun. Google es einfach.

Wenn Sie wissen möchten, wie es geht, binden Sie ein onkeyup-Ereignis an Eingaben. Jedes Mal, wenn eine Taste losgelassen wird, vergewissern Sie sich, dass es sich nicht um eine Funktionstaste wie "Tab" handelt (Sie sollten dem Benutzer "Shift + Tab" oder "Tab" erlauben, ohne ihn dann automatisch zum nächsten Feld zu ziehen.)

wenn dann die Länge des Eingangswert des maxlength Attributs Eingang überschreitet, den Fokus auf die nächste Eingabe (in jQuery $currentInput.next('input').focus()

Answer 4

Sie :focusable Wähler jQuery UI durch die Replikation der Klasse wie folgt verwenden könnte.

$.extend($.expr[':'], { 
    focusable: function(element) { 
     var nodeName = element.nodeName.toLowerCase(), 
      tabIndex = $.attr(element, 'tabindex'); 
     return (/input|select|textarea|button|object/.test(nodeName) 
      ? !element.disabled 
      : 'a' == nodeName || 'area' == nodeName 
       ? element.href || !isNaN(tabIndex) 
       : !isNaN(tabIndex)) 
      // the element and all of its ancestors must be visible 
      // the browser may report that the area is hidden 
      && !$(element)['area' == nodeName ? 'parents' : 'closest'](':hidden').length; 
    } 
}); 

Dann können Sie damit umgehen:

$(document).ready(function() { 
    $('input[type=text]').keydown(function() { 
     var $this = $(this), 
      $focusables = $(':focusable'), 
      current = $focusables.index(this), 
      $next; 

     if ($this.val().length == $this.attr('maxlength')) { 
      $next = $focusables.eq(current+1).length ?$focusables.eq(current+1) : $focusables.eq(0); 
       $next.focus(); 
     } 
    }); 
}); 

Sehen Sie ein funktionierendes Beispiel hier:

http://jsfiddle.net/kU6ZN/

Answer 5

Keine dieser Lösungen in gerade Javascript arbeiten ... dieser Ausschnitt ist ein Anfang:

document.getElementById('txt1').onkeydown = function() { 
    if (this.value.length == this.maxLength) 
    document.getElementById('txt2').focus(); 
} 

Aber sobald Sie haben eingegeben Die Nummer kannst du nicht zurückgehen und bearbeiten, denn sobald du delete drückst, springt sie zurück zu txt2.

Das einzige, was geändert werden muss, ist onkeyup statt. : D

jQuery ist Overkill und faul Programmierung für die überwiegende Mehrheit der Dinge, auf denen es verwendet wird, und dies ist ein großes Beispiel. Es sei denn, Sie verwenden es bereits auf der Seite, es ist ein schrecklicher viel Aufwand für so eine kleine Aufgabe.

Answer 6

JQuery-Plugin:

https://github.com/Mathachew/jquery-autotab

Simplest Verwendung:

hinzufügen Klasse autotabbed auf Ihre Eingaben.

$('.autotabbed').autotab();