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

8

Angenommen, ich habe zwei HTML-Textfelder auf meiner Webseite:

%Vor%

In jedem Textfeld kann der Benutzer bis zu fünf Zeichen eingeben. 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 ?

eingibt     
Daniel Allen Langdon 14.12.2010, 21:57
quelle

6 Antworten

16

Eine grundlegende Implementierung wäre wie folgt:

%Vor%

Aber es gibt einige Usability-Feinheiten, die Sie interessieren können oder nicht. Wenn das oben Genannte nicht ausreicht, gibt es viele jQuery-Plugins, die das für Sie erledigen können.

    
Paolo Bergantino 14.12.2010, 22:00
quelle
3

Es heißt autotabbing, und es gibt viele Plugins, die bereits für jquery existieren, die das tun. Einfach googlen.

Wenn Sie wissen möchten, wie es geht, binden Sie ein onkeyup-Ereignis an Eingaben. Jedes Mal, wenn ein Schlüssel freigegeben wird, vergewissere dich, dass es kein funktionaler Schlüssel wie "Tab" ist (Du solltest dem Nutzer erlauben, "Shift + Tab" oder "Tab" an den Eingang zu geben, ohne ihn dann automatisch zum nächsten Feld abzutasten.)

Wenn dann die Länge des Eingabewerts das maxlength-Attribut der Eingabe überschreitet, setzen Sie den Fokus auf die nächste Eingabe (in jQuery, $currentInput.next('input').focus() .

    
simshaun 14.12.2010 22:01
quelle
2

Keine dieser Lösungen funktioniert in direktem Javascript ... dieses Snippet ist ein Anfang:

%Vor%

Aber sobald du die Nummer eingegeben hast, kannst du nicht mehr zurückgehen und sie bearbeiten, denn sobald du delete drückst, springt sie zurück zu txt2.

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

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

    
Eric Sebasta 25.02.2013 08:30
quelle
1

Die Idee ist, das Ereignis keydown zu behandeln und zu prüfen, ob die maximale Länge erreicht wurde; Wenn ja, fokussiere das nächste Steuerelement.

%Vor%     
casablanca 14.12.2010 22:00
quelle
1

JQuery-Plugin:

Ссылка

Einfachste Verwendung:

Fügen Sie die Klasse autotabbed zu Ihren Eingaben hinzu.

%Vor%     
laffuste 06.10.2013 10:46
quelle
0

Sie könnten die :focusable -Wahlfunktion von jQuery UI verwenden, indem Sie die Klasse wie folgt replizieren:

%Vor%

Dann kannst du es so handhaben:

%Vor%

Siehe ein Arbeitsbeispiel hier:

Ссылка

    
treeface 14.12.2010 22:08
quelle

Tags und Links