JQuery Kochbuch (German Edition)

Ziffern lang und auf vier Eingabefelder aufgeteilt. Damit die Eingabe möglichst schnell vorgenommen werden kann, soll das Springen zum nächsten Eingabefeld so weit wie möglich automatisiert werden, sobald ein Eingabefeld vollständig ausgefüllt ist:

    

Seriennummer

    
    
    
    

    Lösung
    Selektieren Sie innerhalb von

alle

-Elemente. Mit der jQuery-Methode
.bind()
binden Sie dieEvents
keydown
und
keyup
. Wir verlassen die gebundene Funktion gleich wieder, wenn eine Taste aus einer Liste gedrückt wurde, die für das Autotabbing nicht weiter von Interesse ist. Wenn ein

-Element komplett »ausgefüllt« wurde (zu prüfen über das Attribut
maxlength
), rufen wir für das nächste

-Element die Methode
.focus()
auf. Umgekehrt rufen wir
.focus()
für das vorige

-Element auf, wenn die Rückschritt-Taste genutzt wurde und das aktuelle Eingabefeld leer ist:
$('fieldset.autotab input').bind('keydown keyup',function(event){

    // Tastencode für die gerade gedrückte Taste
    var keyCode = event.which;

    // folgende Tasten sollen ignoriert werden:
    // 9 Tab, 16 Shift, 17 Ctrl, 18 Alt, 19 Pause Break, 20 Caps Lock
    // 27 Esc, 33 Page Up, 34 Page Down, 35 End, 36 Home
    // 37 Left Arrow, 38 Up Arrow, 39 Right Arrow, 40 Down Arrow
    // 45 Insert, 46 Forward Delete, 144 Num Lock, 145 Scroll Lock
    var ignoreKeyCodes =
',9,16,17,18,19,20,27,33,34,35,36,37,38,39,40,45,46,144,145,';
    if ( ignoreKeyCodes.indexOf(',' + keyCode + ',') > −1 ) { return; }

    // wir ignorieren Backspace nur bei keydown
    // normal arbeiten lassen, sonst den Fokus nicht ändern
    if ( keyCode == 8 && event.type == 'keydown' ) { return; }

    var $this = $(this);
    var currentLength = $this.val().length;
    var maximumLength = $this.attr('maxlength');

    // Backspace ohne weitere Zeichen: zurück gehen
    if ( keyCode == 8 && currentLength == 0 ) {
     $this.prev().focus();
    }

    // Feld ausgefüllt: nächstes Feld
    if ( currentLength == maximumLength ) {
     $this.next().focus();
    }
});
    Diskussion
    Warum binden wir sowohl
keydown
als auch
keyup
an die Funktion?
    Sie könnten nur das Event
keydown
verwenden. Wenn aber der Anwender das erste Feld ausgefüllt hätte, gäbe es dann keinen sichtbaren Hinweis darauf, dass die nächste Eingabe direkt im zweiten Feld landet. Durch das Event
keyup
erhält das zweite Feld den Fokus, der Cursor wird an den Anfang des Feldes gestellt und die meisten Browser zeigen den Fokus durch einen Rahmen oder eine andere Art des Hervorhebens an. Zudem ist das Event
keyup
für die Rückschritt-Taste notwendig, um den Fokus auf das vorige Feld setzen zu können, wenn das aktuelle Eingabefeld geleert wurde.
    Sie könnten auch nur das Event
keyup
nutzen. Aber wenn sich Ihr Cursor im zweiten Eingabefeld befindet und Sie es mit der Rückschritt-Taste leeren, wird der Fokus in das erste Eingabefeld zurückgesetzt. Leider ist das erste Feld schon voll, daher geht der nächste Tastendruck aufgrund des Attributs
maxlength
verloren und das Event
keyup
würde dann wieder dafür sorgen, dass das zweite Eingabefeld in den Fokus gelangt. Tastenaktionen zu verlieren, ist wirklich schlecht, daher führen wir die gleiche Prüfung bei
keydown
durch. Dadurch wird der Cursor in das nächste Eingabefeld bewegt, bevor das Zeichen verloren geht.
    Da diese Logik nicht viel Rechenleistung verbraucht, können wir problemlos beide Events binden. In anderen Situationen müssen Sie eventuell genauer hinschauen.
    Ihnen wird vielleicht aufgefallen sein, dass die Variable
ignoreKeyCodes
ein String ist. Würden wir sie dynamisch aufbauen, wäre es schneller, ein Array zu erstellen und dann die JavaScript-Methoden
.join(',')
oder
.toString()
zu nutzen. Aber da der Wert immer gleich bleibt, ist es einfacher, direkt einen String zu nutzen. Ich verwende zudem in der Variablen
ignoreKeyCodes
auch am Anfang und Ende ein Komma, da ich auf jeden Fall falsch positive Suchergebnisse vermeiden möchte. Suche ich auf diese Weise nach einem
keyCode
, der durch Kommas umschlossen ist, dann finde ich garantiert nur die gesuchte Zahl – wenn ich nur nach
9
suchen würde, wären auch
19
oder
39
gefundene Ergebnisse.
    Beachten Sie, dass es keinen Code gibt, der den Aufruf von
$this.next().focus()
beim letzten

-Element verhindert. Ich nutze hier