emptyText in HTML

Question

Is there any way to have something similar to emptyText in input fields as in ExtJS?

I tried setting values with changed CSS. But, the value is submitted with the form and it is not disappearing as soon as I click the input field. I need to support IE7 and above

Any help would be appreciated.

Answer 1

What you are looking for is placeholder..W3School

<input type="text" placeholder="Hii" />

You can find polyfills for ie and old versions of other browser who don't support placeholder..

You can add this code for browser who dont support placeholder to make it work same way it works in good browsers..*It needs JQuery

// This adds 'placeholder' to the items listed in the jQuery .support object. 
jQuery(function() {
   jQuery.support.placeholder = false;
   test = document.createElement('input');
   if('placeholder' in test) jQuery.support.placeholder = true;
});


// This adds placeholder support to browsers that wouldn't otherwise support it. 
$(function() {
   if(!$.support.placeholder) { 
      var active = document.activeElement;
      $(':text').focus(function () {
         if ($(this).attr('placeholder') != '' && $(this).attr('placeholder') != undefined && $(this).val() == $(this).attr('placeholder')) {
            $(this).val('').removeClass('hasPlaceholder');
         }
      }).blur(function () {
         if ($(this).attr('placeholder') != '' && $(this).attr('placeholder') != undefined && ($(this).val() == '' || $(this).val() == $(this).attr('placeholder'))) {
            $(this).val($(this).attr('placeholder')).addClass('hasPlaceholder');
         }
      });
      $(':text').blur();
      $(active).focus();
      $('form:eq(0)').submit(function () {
         $(':text.hasPlaceholder').val('');
      });
   }
});

Answer 2

Rajat answer is correct, but only for HTML5. You can look at this question if you want an answer that work on IE (and other browsers) using only pure javascript without any library.