Zwischen bst. Textboxen tabben

Z

Zet

Aktives Mitglied
Hallo zusammen,

ich bin nicht sonderlich JavaScript bewandert,
Derzeit bin ich dabei mit dem Fokus zu experementieren.

Mein Problem:
Ich habe 3 Textboxen mit HTML, zwischen denen ich hin und her tabben möchte also:
Cursor ist in Textbox1.
Textbox1 -> druck Tabulator -> Curser auf Textbox2 -> Tabulator -> Cursor auf Textbox3 -> Tabulator -> Cursor ist wieder auf Textbox1 -> Tabulator -> usw...

Es existieren nur diese 3 Textboxen durch die getabbt werden kann, allerdings soll der Cursor nicht in die URL-Adress-Zeile oder ähnliches gehen, sondern nur zwischen diesen 3 Boxen tabben.
SELFHTML: HTML/XHTML / Formulare / Tabulator-Reihenfolge, Tastaturkürzel und Ausgrauen
Meine einzige Idee wäre es einen Counter mitlaufen zu lassen, der bei jedem tabulator hochgezählt wird. Ist der Counter z.B. auf 3, soll der Cursor wieder ins erste Feld und der Counter wird resettet.

ist das so umsetzbar, oder zu umständlich?

Ich hoffe ihr könnt mir helfen.
Danke.

Grüße
Zet
 
Z

Zet

Aktives Mitglied
Okay, das mit dem Counter war natürlich Quatsch, steigt man nicht im ersten textfeld ein führt das natürlich zu fehlern...

Also werde ich wohl eine ID an die textboxen vergeben müssen, und wenn in der ID 3 tabulator gedrückt wird muss der cursor wieder in den ersten, oder kann ich das irgendwie mit dem tabindex lösen?

evtl eine Schleife, die solange abfragt ob der tabindex <= 3 ist, und wenn er es nicht ist wieder tabindex ... ach das ist käse

Mir gehen die Ideen aus, wie ich das ganze umsetze.


Grüße
Zet
 
Z

Zet

Aktives Mitglied
Erstmal danke Bananabert,

nach ein wenig einlesen in die Basics habe ich folgendes Script zusammengebaut:

HTML: 
<html>
  <head>
    <title>Test</title>
    <body>
		<form name="Form1" action="self">

			Name:
			<input type="text"   id = "0" name="Name" ><br>
			
			Passwort:
			<input type = "password" id = "1" onClick="goToOwnField(1)" name = "Passwort"><br>
			
			Neues Passwort:
			<!-- Problem:
			Mit onblur="setFirstFieldFocus(event.keyCode)" geht er falls man sich im dritten Feld befindet und in das zweite mit der Maus klickt
			zuerst kurz in das erste Feld, und wechselt dann durch das onClick Event von Passwort in das zweite(korrekte) Feld.
			
			Mit dem keyDown Event würde das nicht passieren, allerdings wechselt der Fokus rätselhafterweiße nicht in das erste Feld, obwohl der
			Aufruf der selbe bleibt und sich lediglich das Event ändert.
			-->
			<input type = "password" id = "2" onblur="setFirstFieldFocus(event.keyCode)"  name = "nPasswort"><br> 
			<br><br><br><br><br><br><br><br><br><br><br><br>
			....beliebige Felder:
			<input type = "text" id = "3" name = "beliebiges Feld"> 		
			<br><br><br><br><br><br><br><br>
		</form>


		<script type ="text/javascript">

			function setFirstFieldFocus(Keycode)
			{
				// Wenn Tabulator gedrückt wurde
				if (Keycode = 9)
				{
				    // Gehe in Textfeld Name
					//  alert("Tabulator gedrückt, gehe in feld 1");
					document.Form1.Name.focus();
				}
				
			}
			
			function goToOwnField(id)
			{
				 document.Form1.elements[id].focus();
			}
			
		</script>
     </body>
   </head>
</html>



Meiner Meinung nach funktioniert dieser Code soweit, ob er schön ist ist eine andere Frage.
Problem dabei ist noch das wenn ich das onblur event von -Neues Passwort- so stehen lasse, das problem auftritt das ich nichtmehr mit der Maus in das 2. Feld gelange, das heißt wenn ich im 3. feld bin und dann aber ins 2 klicken möchte, durch das onblur event der Focus in das erste gesetzt wird.
Deshalb hat das 2. Feld eine methode die beim Klick den Focus auf sich selbst setzt.

Dadurch springt der Cursor kurz ins erste Feld, das nicht gewollt ist - und kurz darauf in das 2, gewollte Feld.

Falls ihr lust habt könnt ihr es ja einfach mal ausprobieren, und mir sagen wie ich es hätte evtl komfortabler machen hätte können.
Ziel bleibt mit tabulator zwischen NUR diesen 3 aufeinanderfolgenden Feldern hin- und herzuswitchen.



Liebe grüße,
Zet
 
Ähnliche Java Themen
  Titel Forum Antworten Datum
B Kommunikation zwischen Javascript und Java? Angular, React, JQuery - Fragen zu JavaScript 7
Philipp_ebert XMLHttpReuest() zwischen zwei ESP8266 Angular, React, JQuery - Fragen zu JavaScript 2
N Javascript: mehrere Textfelder prüfen ob es sich um eine Zahl handelt und diese zwischen 1 und 49 liegt Angular, React, JQuery - Fragen zu JavaScript 10
P Zahl zwischen 0 und 5 raten Angular, React, JQuery - Fragen zu JavaScript 3
R Unterschied zwischen Java und Javascript? Angular, React, JQuery - Fragen zu JavaScript 8
F komisches verhalten zwischen den browsern Angular, React, JQuery - Fragen zu JavaScript 5
K Hilfe bei mitwachsenden Textboxen. Angular, React, JQuery - Fragen zu JavaScript 5

Ähnliche Java Themen

Aktuelle Jobs

Neue Themen


Oben