Placeholder attribute in HTML5

I’ve been working on HTML5 extensively now and learning various new stuffs everytime. Today I shall let you know about a new attribute of input element called “placeholder”.

What exactly is placeholder?
Many times you would like to have a textbox have a label within itself. To accomplish this you either use javascript or use jQuery.
But with HTML5 this feature is built-in.

Here is how to implement it:

<input type="text" id="txtUsername" placeholder="Username" />

You can use the placeholder attribute of the input element to show a label within the textbox.
Remember, this feature is supported by all major browsers except Internet Explorer.

How to implement the same for IE?
You can use jQuery to implement the similar functionality that can be supported in IE.
The code would be:

//on document.ready event
$(document).ready(function (){
      //for each input with the attribute of placeholder
      $("input[placeholder]").each(function() {
        var placeholder = $(this).attr("placeholder"); 

        //upon focus of the element
        $(this).val(placeholder).focus(function() {
            // if the current value is same as placeholder
            if($(this).val() == placeholder) {
                $(this).val("");   //clear the value.
            }
        }).blur(function() {   //upon blur
            if($(this).val() === "") { // if the value is empty
                $(this).val(placeholder);  //show the placeholder
            }
        });
      });
    }
});

I have created a sample page implementing the same here.

I hope you liked this article.
Please provide your feedback in the comments section below.

Bought a new Samsung Galaxy Note

Hello,

I purchased a new samsung galaxy note yesterday. I’m writing this post from the new device.

The device is superb and I’m liking it more than any of my other device.

Microsoft Tech-ed 2011

Hi folks,
Currently am in Microsoft Tech-ed 2011, Bangalore.
Huge crowd. Lots of goodies too.
Hope I can provide more details of my experience to you all.

About Me

Hello,

My name is Manjunath HK and I currently work for 3i-Infotech as a Project Leader.

I’ve been working on Microsoft Technologies from past 14 years.

This is my technical blog and can know about many things that .NET technology.

You can also visit my other blog http://www.manjunathhk.com to know more about other stuffs

You can contact me through mails:

contact@manjunathhk.net

contact@manjunathhk.com

Hope you’ll find the information posted here useful.

I thank my friend Anant Anand Gupta for all the help he did in setting up the domain, hosting and even the environment for better maintenance of all my blogs and emails.

You can visit his blogs here and here