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')">