Tips & Tricks: Formulare beinflussen

Formulare können auf verschiedene Weise beeinflußt werden. Für viele Anwendungen ist dies sehr sinnvoll. Dieser Tip zeigt ein paar weitere Möglichkeiten auf Formularelemente zu reagieren.

Möchten Sie Formularelemente einbinden, auf die der Anwender keinen Einfluß haben soll, d.h. welche nicht verändert werden können? Mit Hilfe der evenHandler onfocus und der Methode blur() können Sie bliebige Formularelemente mit dieser Eigenschaft ausstatten. Binden Sie dazu einfach im gewünschten Elemente die Anweisung onfocus="this.blur()" ein:

<TEXTAREA NAME="x" COLS="40" ROWS="3" onfocus="this.blur()">

Dies ist eine Demonachricht, welche nicht verändert werden kann. Versuchen Sie den Inhalt zu ändern oder neunen Text einzufügen.

Haben Sie evtl. Formularelemente, in denen nur eine bestimmte Anzahl an Zeichen eingegeben werden sollen? Auch hier können Sie mit einer einfachen JavaScript-Routine die Kontrolle über die Eingaben behalten.

function maxZeichen(max, name) {
wert = eval("document.demo." +name+ ".value.length");
	if (wert > max) {
	    alert("Es sind nur " +max+ " Zeichen zugelassen! Sie haben aber " +wert+ " Zeichen eingegeben.");
		return false;
    }   else return true;
}

Die Funktion maxZeichen() wird mit dem eventHandler onblur im entsprechenden Formularelemente eingebunden. Als Parameter übergeben Sie die erlaubte Anzahl an Zeichen und den Namen des Formularelements.

Das Programm kann beispielsweise so erweitert werden, daß nicht nur eine Meldung ausgegen wird, sondern auch das Versenden des Formulars selbst unterbunden wird. Dazu müssen Sie mit dem eventHandler onsubmit arbeiten:

<FORM NAME="demo" onsubmit="return maxZeichen(15,'a')">
<INPUT TYPE="Text" NAME="a" SIZE=35>
</FORM>

Wie könnte man das Programm noch sinnvoll erweitern? Richtig! Falls der Anwender zuviele Zeichen eingegeben hat, setzen Sie den Focus wieder auf das Feld und markieren die Eingaben:

Mit Hilfe der Methoden focus() und select() wird bei fehlerhaften Eingaben zum einen der Cursor in das entsprechende Feld gesetzt und zum anderen die darin gemachten Eingaben selektiert. Den Source-Code erweitern Sie einfach im if-Teil der Routine mit den folgenden Ergänzungen:

eval("document.demo2." +name+ ".focus()");
eval("document.demo2." +name+ ".select()");

Jetzt können man die bereits gemachten Eingaben zusätzlich noch automatisch auf 15 Zeichen kürzen:

Das Skript ist wie folgt zu Ändern:

function maxZeichen3(max, nr) {
wert = document.demo3.elements[nr].value.length;
	if (wert > max) {
	    alert("Es sind nur " +max+ " Zeichen zugelassen! Sie haben aber " +wert+ " Zeichen eingegeben.");

		in_value = document.demo3.elements[nr].value;
		out_value = in_value.substring(0,max-1);
		document.demo3.elements[nr].value = out_value;
		
		document.demo3.elements[nr].focus();
		document.demo3.elements[nr].select();
		return false;
		
    } else return true; 
}

Jetzt wäre noch eine Funktion schön, die nur eine bestimmte Anzahl an Wörtern zur Eingabe zuläßt :-) Für diese Aufgabe müssen Sie mit der split-Methode Arbeiten. Verscuhen Sie im folgenden Formular mehr als drei Wörter einzugeben.

Der dazugehörige Source-Code sieht wie folgt aus:

function maxZeichen4(max, name) {
wert = eval("document.demo4." +name+ ".value.length");
temp = eval("document.demo4." +name+ ".value.split(' ')");
	if (temp.length > max) {
	    alert("Es sind nur " +max+ " Wörter zugelassen! Sie haben aber " +temp.length+ " Wörter eingegeben.");
		eval("document.demo4." +name+ ".focus()");
		eval("document.demo4." +name+ ".select()");
		return false;
    }
	else {
	
	// normalerweise:
	// return true; 
	// w/ der Demo aber die folgenden Anweisungen
		alert("Die eMail würde nun versandt werden");
		return false;	
	}
}

Genau wie im vorherigen Beispiel können Sie auch hier bewirken, daß die Eingaben automatisch auf die erlaubte Anzahl an Wörtern gekürzt wird. Den Source-Code erweitern Sie einfach im if-Teil der Routine mit den folgenden Ergänzungen:

temp = temp.slice(0,3);
document.demo5.elements[nr].value = temp.join(' ');

Geben Sie nun nochmal mehr als drei Wörter in das folgende Formularfeld ein und sehen Sie was passiert.

Copyright © 1996-1999 Johannes Gamperl. All rights reserved. Alle Rechte vorbehalten.
Kakao & Kekse ist ein Service von J|G Webdesign & Programmierung.