Artikel abonnieren
Seriennummern und ähnliche Codes werden oft auf mehrere Teile aufgeteilt, um es dem Benutzer zu erleichtern sie abzulesen. Bei der Eingabe ist es oft ähnlich, die Seriennummer kann in mehreren Teilen eingegeben werden, sinnvollerweise in den gleichen Teilen wie sie dem Benutzer übergeben wurde.
Wenn der Benutzer das erste Feld ausgefüllt hat, wäre es praktisch, wenn der Browser automatisch zum zweiten Feld weiterspringen würde. Sowas lässt sich mit Java Script leicht realisieren. Noch besser wäre es natürlich, wenn der Benutzer auch mit den Pfeiltasten zwischen den Feldern navigieren könnte, oder wenn nur bestimmte Zeichen vom Benutzer eingegeben werden können.
In diesem Artikel erkläre ich, wie man mittels Java Script ein solches automatisches Weiterspringen zwischen Formularfeldern programmiert. Außerdem stelle ich eine kleine Klasse vor die es zusätzlich dazu noch ermöglicht mit den Pfeiltasten durch die Felder zu navigieren und die Eingabe auf bestimmte Zeichen zu begrenzen.
Automatisches Weiterspringen
Man überprüft einfach bei jedem Tastendruck, ob das aktuelle Feld bereits voll ist, ist das der Fall wird das nächste Feld (sofern vorhanden) aktiviert. Bei einem Tastendruck werden drei Ereignisse ausgelöst:
- keydown, wenn eine Taste gedrückt wird.
- keypress, wenn ein Zeichen geschrieben wird bzw. die Aktion der Taste ausgeführt wird (z.B. neue Zeile bei der Eingabetaste).
- keyup, wenn die Taste wieder losgelassen wird.
Das keypress-Ereignis halte ich für am besten geeignet, da es sofort auf jedes eingegebene Zeichen reagiert. Um überprüfen zu können, ob ein Feld bereits voll ist, muss erstmal bekannt sein wie viele Zeichen ein Feld aufnehmen darf, hierzu wird das maxlength-Attribut des input-Elements verwendet.
Die Überprüfung selbst ist einfach, man vergleicht einfach die max. Länge mit der Länge des Inhalts, ist sie gleich, wird zum nächsten Element gesprungen. Der Inhalt des Eingabefelds ist in der Eigenschaft value gespeichert, die Länge lässt sich über die Eigenschaft length von value ermitteln. Jedes Formular-Element hat die Methode focus(), mittels derer man das Element “aktivieren” kann, so dass der Eingabezeiger dorthin springt.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="de-DE"> <head> <title>Seriennummer-Eingabe</title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <script type="text/javascript"> function weiterspringen(aktuellesFeld, naechstesFeld) { if (aktuellesFeld.value.length == aktuellesFeld.getAttribute('maxlength')) document.getElementsByName(naechstesFeld)[0].focus(); } </script> </head> <body> <h1>Produkt-Aktivierung</h1> <span>Bitte geben Sie die Seriennummer des von Ihnen erworbenen Produkts an.</span> <form name="formular" method="post" action="seriennummer.html"> <input onkeypress="weiterspringen(this, 's2');" maxlength="4" name="s1" type="text"> - <input onkeypress="weiterspringen(this, 's3');" maxlength="4" name="s2" type="text"> - <input maxlength="4" name="s3" type="text"> </form> </body> </html>
Ich habe auch diesmal wieder eine Beispielseite angelegt:
Die Klasse
Ich habe eine kleine Klasse programmiert die noch etwas mehr kann:
- Der Benutzer kann nur noch bestimmte Zeichen eingeben. Wenn eine Seriennummer also beispielsweise keine Zahlen enthalten kann, kann der Benutzer sie auch nicht eingeben.
- Man kann auch mit den Pfeiltasten hin- und her navigieren, auch zwischen den Feldern.
- Im Internet Explorer und bei Gecko-basierten Browsern (z.B. Firefox) springt der Eingabezeiger automatisch zum letzten Zeichen, wenn man ein Feld zurück springt.
Um die Funktionalität zu aktivieren erstellt man einfach eine neue Instanz der Klasse, und weist ihr mittels der Methode elementHinzufuegen(<Element>) die einzelnen Felder zu.
window.onload = function() { var sn = new GeteilteEingabe(); sn.elementHinzufuegen(document.getElementsByName('s1')[0]); sn.elementHinzufuegen(document.getElementsByName('s2')[0]); sn.elementHinzufuegen(document.getElementsByName('s3')[0]); }
Die Variable erlaubteZeichen kann angepasst werden, um festzulegen, welche Zeichen der Benutzer in den Eingabefeldern der Seriennummer benutzen darf.
var erlaubteZeichen = 'abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ123456789';
Für die Klasse habe ich natürlich auch wieder eine Beispielseite zur Demonstration erstellt.
Loading ...
Kommentare
Keine Kommentare bis jetzt.