I love HTML5 and all its wonderful, new little attributes that make the life of the developer easier and more enjoyable. For example, the placholder attribute, which you can use on text input fields in forms. Why is it great? Because it allows you to place a label inside the form that automatically disappears when the user starts typing text in it. Before HTML5, everyone was doing this, yes, but you had to include javascript to make it work. Not so with HTML5! Now the placeholder attribute has all that UX goodness for you, right in the browser, no js necessary.

Except of course for Internet Explorer 7/8 (and other older browsers) that do not support HTML5 attributes. Fear not! Here is a great little jQuery script that will apply the native HTML5 functionality of the placeholder attribute to those pesky old browsers your client expects you to support.

$(document).ready(function() {

	if ( !("placeholder" in document.createElement("input")) ) {
		$("input[placeholder], textarea[placeholder]").each(function() {
			var val = $(this).attr("placeholder");
			if ( this.value == "" ) {
				this.value = val;
			}
			$(this).focus(function() {
				if ( this.value == val ) {
					this.value = "";
				}
			}).blur(function() {
				if ( $.trim(this.value) == "" ) {
					this.value = val;
				}
			})
		});

		// Clear default placeholder values on form submit
		$('form').submit(function() {
            $(this).find("input[placeholder], textarea[placeholder]").each(function() {
                if ( this.value == $(this).attr("placeholder") ) {
                    this.value = "";
                }
            });
        });
	}
});

Many thanks to Michael at ScriptTiny.com for making this handy bit of code available to everyone. You can see the original post here with comments.