Da die hier vorgestellte Lösung jQuery voraussetzt, muss die Bibliothek natürlich in der Website eingebunden sein. Die Idee ist, auf jedes Eingabefeld mit dem Attribut placeholder ein Funktion anzuwenden. Diese Funktion soll den Wert des placeholder Attributs auslesen und als echten Wert für das Textfeld setzen.

HTML5 Placeholder Crossbrowser Script

	$("input[placeholder]").each(function(){
		if($(this).val()==""){			
			$(this).val($(this).attr("placeholder"));
			$(this).focus(function(){
				if($(this).val()==$(this).attr("placeholder")) $(this).val("");
			});
			$(this).blur(function(){
				if($(this).val()==""){
					$(this).val($(this).attr("placeholder"));
				}
			});
		}
	});
 
	$('form').submit(function(evt){
		$('input[placeholder]').each(function(){
			if($(this).attr("placeholder") == $(this).val()) {$(this).val('');}
		});
	});
});

So ein Platzhalter hat den Effekt, dass er verschwindet sobald das Eingabefeld fokussiert wird und wieder gesetzt wird, sobald der Fokus verloren geht. Dies erreichen wir dadurch, in dem 2 Funktionen an jedes Eingabefeld mit Attribut placeholder gebunden werden.

Zum einen $(this).focus(), hier wird beim fokussieren des Feldes geprüft, ob der Wert des Feldes mit dem Platzhalter übereinstimmt und wenn ja, wird der Wert gelöscht.

Zum anderen wird noch die Funktion $(this).blur() gebunden, diese wird ausgeführt sobald das entsprechende Eingabefeld den Fokus wieder verliert. Sollte der Wert des Feldes leer sein, dann wird dieser wieder auf den Platzhalter gesetzt.

Nachtrag vom 22.05.2012
Hier noch eine leicht geänderte Version von Phillip, die sich dadurch unterscheidet, dass das Script auch dann arbeitet wenn der Benutzer das Feld wieder leert, bzw. ein Wert angegeben ist.

	// ie lt 10 fix to use HTML5 placeholder tag
	$('input[placeholder]').each( function() {

		var that = $(this);

		// if no value is set - add placeholder text
		if ('' == that.val()) {
			that.val( that.attr('placeholder') );
		}

		// on focus remove placeholder text
		that.focus( function() {
			if (that.attr('placeholder') == that.val()) {
				that.val('');
			}
		});

		// on blur restore placeholder text
		that.blur( function() {
			if( '' == that.val()) {
				that.val( that.attr('placeholder'));
			}
		});

	});

	// on submit remove placeholder text
	$('form').submit( function(event) {
		$('input[placeholder]').each(function() {
			var that	= $(this);
			if ( that.val() == that.attr('placeholder')) {
				that.val('');
			}
		});
	});