HTML Input Place Holder

A Simple way to implement placeholder in a Input Field. Although HTML 5 by default provides placeholders[placeholder attribute], it falls short in Cross Browser Compatibility

Construct A Simple Form

Username:

Let's Implement Placeholders Now [With jQuery]

Change the HTML To
HTML:

 Username  

Result

Username

Apply CSS and Overlay placeholder over Input Element
CSS:

.place-holder {
 position:relative;
 left:-245px;
 color:#AAA;
 z-index:1; 
}
.name-field {
 width:250px;
 background:#FFF;
 z-index:0;
}

Result

Username

Handle Focus and Blur Event :)
jQuery:

$().ready(function () {
 function hideHolder() {
  $('.place-holder').hide();
 }
 function showHolder() {
  if($('.name-field').val() == '') {
   $('.place-holder').show() 
  }
 }
 $('.name-field').focus(hideHolder);
 $('.name-field').blur(showHolder);
 $('.place-holder').click(function () {
  $('.name-field').trigger('focus');
 });
});

Result

Username

We are Done. Also You Can extend this upto 'N' number of Elements. You can also play with z-index value instead show()&hide() jQuery functions :)

Pros over playing around input's value attribute

• Styling for placeholder is decoupled from input element and vice versa
• The value of input element will be '' always if it is left empty
• Simple

Cons
Just leave a comment if there is any :)