xig

Erstellt: 29.03.2010 00:11

Füllt man ein Formular im Browser aus, kann man jenes absenden mit dem Drücken der Enter-Taste.

Dies ist zumindest die Gewohnheit, welche man kennt von Opera, Firefox und Co und welche man - oder zumindest ich - auch praktisch findet, da man nicht extra zur Maus greifen muss.

Internet-Explorer 6-8 weisen dieses Verhalten unter gewissen Umständen nicht auf. Ich habe gelesen, dass dieses Verhalten vom Internet-Explorer richtiger sein soll als das der Anderen, da der Browser ja nicht weiss, welcher Submit-Button gedrückt werden soll, wenn es mehrere Submit-Buttons gibt.
Das Verhalten des Internet-Explorers tritt jedoch nur dann auf, wenn sich im Formular nur ein einziges Textfeld befindet und sonst nichts. Diese Konstellation gibt es zum Beispiel öfters bei Suchfeldern.

Nun habe ich schon verschiedene Lösungen gesehen. Unter Anderem welche mit Javascript, was ich eher unschön fand.
Am einfachsten und schönsten fand ich die Lösung, welche ich bei www.e-treu.de fand.

Das Formularfeld wird einfach um ein zweites, verstecktes Input-Feld erweitert... und schon reagiert der Internet-Explorer gleich wie andere Browser. (Toll und logisch, nicht?)

Das ganze sieht dann wie folgt aus:

<form method="post" action="ziel.php" name="suche">
<p><label for="suchbegriff">Suchbegriff:</label>
<input type="text" name="suchbegriff">
<input type="text" style="display:none">
<input type="submit" name="action" value="Suchen"></p>
</form>

Mit style="display:none" wird das zweite Textfeld versteckt. Und Tada! Der Internet-Explorer versendet Submits auf einmal per Enter-Taste.

Eventuell ist es sinnvoll, dass zweite Feld noch mit disabled="disabled" zu deaktivieren, falls jemand CSS nicht aktiviert hat, sein eigenes Style-Sheet verwendet oder gar einen Textbrowser am Start hat.
Alternativ oder zusätzlich, kann man das zweite Textfeld auch mit <!--[if IE]><![endif]--> verstecken. Das ganze sieht dann so aus:

<form method="post" action="ziel.php" name="suche">
<p><label for="suchbegriff">Suchbegriff:</label>
<input type="text" name="suchbegriff">
<!--[if IE]>
<input type="text" style="display:none" disabled="disabled">
<![endif]-->
<input type="submit" name="action" value="Suchen"></p>
</form>

So wird das zweite Textfeld definitiv von keinem Browser mehr angezeigt und es erfüllt den Nutzen im Internet-Explorer Submits per Enter zu versenden.

Tagged: Browser HTML/CSS Windows