Textfelder mit verschwindendem Standardtext bei Klick – so hat man das Früher gemacht

In manchen Website-Designs ist es nötig, die beschreibenden Felder von Textfeldern in Formularen in den Feldern selbst unterzubringen. Heute benutzt man dazu das placeholder Attribut. Zu Zeiten des IE 6/7/8/9 habe ich mich eines anderen Mittels bedient:
Ich habe damals Standardtexte realisiert , die verschwinden, sobald in das Textfeld geklickt wird. Mit folgendem JavaScript (Voraussetzung ist die Einbindung von jQuery), hatte ich dies umgesetzt.

HTML-Code:

<div id="divbox"><input type="text" value="Suchen ..." /></div>

 

JavaScript-Code:

// Such-Eingabefeld Standardtext (bei Klick ausblenden)
stdSearchText = $("#divbox input[type=text]").val();
$("#divbox input[type=text]").click(function(){
	if($(this).val() == stdSearchText) {
		$(this).val("");
	}
});
 
$("#divbox input[type=text]").focusout(function(){
	if($(this).val() == "") {
		$(this).val(stdSearchText);
	}
});

 

Zur Erklärung:
Der oben gezeigte Code-Schnipsel muss auf die Beschaffenheit Ihres Codes angepasst werden und in den Bereich $(document).ready(function(){ ... }); Ihres JavaScript-Codes eingefügt werden. Dieses Beispiel funktioniert nur für ein bestimmtes Textfeld, ließe sich aber einfach generalisieren, sodass er für beliebig viele Textfelder funktioniert.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.