nicht angemeldet
Fokus auf Textfeld legen (im IE8)
Hallo zusammen,
ich habe ein Kontaktformular mit Benutzereingabenprüfung. Wurden Felder fehlerhaft ausgefüllt, wird dem Benutzer ein Fehlerhinweistext angezeigt, und die betroffenen Felder werden zudem farblich hervorgehoben. Zusätzlich soll der Fokus auf das betroffene Feld gesetzt werden (bei mehreren fehlerhaften Feldern, Fokus selbstverständlich nur auf das erste Feld setzen).
In aktuellen Version von FF, Opera und Safari wird der Fokus wie gewünscht auf das entsprechende Formularfeld gesetzt. Nur im IE (Version 6,7 u. 8) wird der Fokus nach Abschicken des Formulars nicht auf das Formularfeld gestetzt. Es sei denn, man lädt die Seite mit F5 neu oder ich lasse nach dem setzen des Fokus noch eine alert-Box ausgeben.
Ich nehme an, der Fokusverlust kommt durch den "Anker-Sprung" zustande?
Auf den Anker möchte ich aber nicht verzichten, da sonst der Fehlerhinweistext aus dem sichtbaren Bereich verschwinden könnte.
Hatte schon jemand ein ähnliches Problem und weiß dies zu lösen? Gibt es einen Workaround? Ist es lediglich ein Problem der Reihenfolge (erst Anker-Sprung dann Fokus setzen vs. Fokus setzen dann Anker-Sprung)?
Bin schon richtig am verzweifeln...
Hier ein paar beispielhafte Auszüge aus dem Quelltext um den Ablauf zu verdeutlichen:
-
Formular wird mit #anker abgeschickt:
<h3><a name="anker">Kontaktformular</a></h3>
<div id="msg">Fehlerhinweistext für Benutzer...</div>
<form name="kontakt" action="#anker" method="post"> -
sofern die Benutzereingabenprüfung einen Fehler liefert, wird im body-Tag per onload die JS-Funktion aufgerufen, um den Fokus auf das entsprechende Feld zu setzen:
<script type="text/javascript">
function setCursor(id) {
document.getElementById(id).focus();
}
</script>
<body onload="setCursor('email')">
-
Hallo zusammen,
habe das Problem nun in den Griff bekommen.
Ich nehme an, der Fokusverlust kommt durch den "Anker-Sprung" zustande?
Ja, das ist (im IE) tatsächlich so. Habe meine JS-Funktion daraufhin angepasst:
<script type="text/javascript">
function setCursor(id) {
document.location = document.location;
document.getElementById(id).focus();
}
</script><body onload="setCursor('email')">
-
Hi there,
document.location = document.location;
Ich würde Deine Lösung zumindest noch durch das Entfernen dieser nutzlosen Zeile verbessern...
-
Hi,
document.location = document.location;
Ich würde Deine Lösung zumindest noch durch das Entfernen dieser nutzlosen Zeile verbessern...
gerade diese Zeile hat dazu geführt, dass es auch im IE funktioniert, sprich der Fokus im IE trotz Ankersprung auf das Textfeld gelegt wird :-)
Ohne diese Zeile, wurde der Fokus zuerst auf das Textfeld gelegt und danach dem Anker zugesprochen => Fokusverlust beim Textfeld.
Durch diese "nutzlose" Zeile, so meine Interpretation, zwinge ich den IE dazu den Fokus zuerst auf den Anker zu legen und erst danach auf das Textfeld, wodurch der Fokus dann wie gewünscht beim Textfeld bleibt.
Vielleicht habe ich das auch falsch gedeutet, und ich gebe zu, diese Lösung ist nicht sehr elegant, aber wie dem auch sei, mit dieser Lösung funktioniert es nun auf jeden Fall auch im IE einwandfrei.
-
-