Tuesday, December 27, 2011

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 :)