Javascript: Events für komfortable Eingabeformulare

Events sind die Schnittstelle zwischen Javascript und HTML. In diesem Beitrag erfahren Sie, wie Sie ein Eingabeformular mit Hilfe der Events onblur, onload und onsubmit komfortabler und sicherer machen.

Bei Formularen sind Eingabekomfort und Fehlermeldungen wichtig. Nur, wenn Benutzer bemerken, dass sie einen Fehler bei der Eingabe gemacht haben, bekommt das System valide Daten. Mit wenigen Handgriffen und ein paar Zeilen Javascript machen Sie auf Fehler aufmerksam.

Den Cursor beim Laden auf ein Eingabefeld setzen

Für einen Besucher Ihrer Site ist es komfortabel, wenn beim Laden eines Formulars der Cursor in das erste Eingabefeld gesetzt wird. Er kann dann sofort lostippen. Die Funktion zum Setzen ist setfocus(). Darin wenden Sie die Methode focus() auf document.forms.adr.name an. adr ist der Name des Formulars, nachname bezeichnet das Eingabefeld. Für den Aufruf der Funktion sorgt

<body onload=”javascript:setFocus()”>

Leere Formularfelder erkennen

Mit Javascript überprüfen Sie ganz einfach, ob der Benutzer ein Feld auch ausgefüllt hat. Gut geeignet ist hierfür onblur(). Im Beispiellisting ist dieses Ereignis jedem Input-Feld zugeordnet.

Beim Verlassen des Feldes wird checkentry() aufgerufen und das aktuelle Element übergeben. Aus dem Element ermittelt die Funktion die id und prüft dann die Länge des Elementinhalts. Ist das Element leer, ändert die Funktion anhand der id die Stilvorlage. Auch der title-Parameter ändert sich. Sobald der Mauszeiger über dem Eingabefeld steht, wird ein Hinweis zum Fehler eingeblendet. Der Besucher weiß dann, wo er einen Fehler gemacht hat und kann ihn schnell beheben.

Das komplette Formular prüfen

Das Event onblur hat ein kleines Problem: Es funktioniert nur, wenn der Besucher das Feld nach der Eingabe wirklich verlässt. Das passiert in der Regel aber nicht beim zuletzt ausgefüllten Feld. Erst, wenn der Benutzer den Submit-Button anklickt, wird das Feld verlassen und geprüft. Doch dann ist es bereits zu spät. Deshalb bringen Sie im Formular noch das Event onsubmit unter. Das greift, sobald der Submit-Button angeklickt oder Return gedrückt wird.

onsubmit ruft die Funktion checkForm() auf. Die untersucht in einer Schleife alle Text-Elemente des Formulars mit Hilfe der schon bekannten Funktion checkEntry() und wertet deren Rückgabewert aus.

Ist auch nur ein einziger Eintrag false, gibt checkForm() ebenfalls den Wert false zurück. Stimmt alles, bleibt es bei einem true. Dieses Ergebnis geht schließlich an das onsubmit-Event zurück. Bei einem false wird der Klick auf den Button unwirksam – das Formular bleibt mit den als falsch markierten Feldern stehen.

<html>

<head>

<title>Javascript-Beispiele</title>

<script type=”text/javascript”>

<!–

function setFocus()

{

document.forms.adr.nachname.focus();

}

function checkEntry(element)

{

id = element.id;

if (document.getElementById(id).value.length == 0)

{

document.getElementById(id).style.border=”solid

red 2px”;

document.getElementById(id).title=”Eintrag

erforderlich!”;

return false;

}

else

{

document.getElementById(id).style.border=”solid

black 1px”;

return true;

}

}

function checkForm()

{

retValue = true;

for (var i=0; i<document.adr.elements.length; i++)

{

element = document.adr.elements[i];

if (element.type == ‘text’)

{

if (checkEntry(element) == false)

{

retValue=false;

}

}

}

return retValue;

}

–>

</script>

</head>

<body onLoad=”javascript:setFocus()”>

<form action=”dummy.php” method=”GET” name=”adr”

onsubmit=”javascript:return checkForm()”>

Name: <input id=”inpName” type=”text” name=”nachname

onblur=”javascript:checkEntry(this)” title=”Bitte de

Namen eingeben”/><br/>

Vorname: <input id=”inpVorname” type=”text”

name=”vorname” onblur=”javascript:checkEntry(this)”

title=”Bitte den Voramen eingeben”/>

<input type=”submit” value=”Absenden”/>

</form>

</body>

</html>

Typische Events

Ihnen als Programmierer stehen zahlreiche Events zur Verfügung, mit denen Sie von HTML aus Javascript-Funktionen aufrufen können. Die wichtigsten sind:

onClick: damit legen Sie fest, was passiert, wenn auf ein Element geklickt wird.

onFocus: dieses Event tritt in Aktion, sobald ein Element angewählt ist. Das ist besonders bei Formularfeldern interessant. Zum Beispiel, wenn Sie beim Anwählen eines Eingabefelds automatisch dessen Inhalt aus zuvor bereits gefüllten Formularfeldern errechnen.

onBlur: hiermit bestimmen Sie die Aktion, die in Kraft tritt, sobald ein Element seinen Fokus verliert. Das ist ideal, um Formularfelder nach der Eingabe zu prüfen.

onLoad: wird beim Laden eines Elements ausgeführt. Im Normalfall steht onload im Body-Tag eines HTMLDokuments.

onKeyDown: tritt in Aktion, sobald eine Taste gedrückt wurde

onkeyUP: ruft die definierte Funktion auf, sobald die Taste wieder losgelassen wurde.

Javascript mit Bedacht einsetzen

So verlockend der Einsatz von Javascript auch sein mag, er will wohl überlegt sein. Sinnvoll ist Javascript auf jeden Fall überall da, wo es um gute Zusatzfunktionen geht, etwa die hier gezeigte Eingabekontrolle. Anderenorts aber kann Javascript schädlich sein. Wer zum Beispiel eine Menüstruktur ausschließlich auf Javascript aufbaut, schließt damit Suchmaschinen aus und außerdem alle Nutzer, die Javascript abgeschaltet haben. Deshalb gelten folgende Kriterien beim Einsatz von Javascript: – Die Website muss auch bedienbar sein, wenn der Benutzer Javascript abgeschaltet hat. – Javascript-Links müssen auch als normale HTMLLinks erreichbar sein. – Javascripts kompakt halten, um die Ladezeit nicht unnötig zu verlängern aufwändige Arbeiten auf den Server verlagern. – Vor dem Implementieren von Javascript immer prüfen, ob sich Aufgaben nicht einfacher mit HTML oder CSS lösen lassen. – Mit Javascript nicht die Funktion des Browsers verändern. Programme, die zum Beispiel die rechte Maustaste blockieren, kommen nicht gut an. 3

Ähnliche Beiträge