# Zwischen bst. Textboxen tabben



## Zet (28. Mai 2014)

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


----------



## Zet (28. Mai 2014)

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


----------



## Bananabert (28. Mai 2014)

Moin,

2 sekunden googlen und direkt etwas gefunden :how-do-i-move-focus-to-next-input

Müsstest du noch ein wenig anpassen, sodass es nur bei einem Tabulator druck passiert.


----------



## Zet (5. Jun 2014)

Erstmal danke Bananabert,

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



Spoiler





```
<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


----------

