jQuery Fallback for HTML5 Placeholder Attribute

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.

Comments

It should be noted you happen to be shown your friends pictures using their accounts how to crack facebook account password not pictures of which in your account. The malware used on the suspect was delivered when he logged on to his Yahoo email account. Several sites describe this LED flashlight hack in detail, so we'll just cover the basics here.

Add new comment