Wednesday, July 9, 2014

Fix html5 placeholder attribute for ie7 & ie8

Placeholder text is a short example or hint text that is shown in a form field when the field is unfocused and has no input from the user.

   if (jQuery.browser.msie && jQuery.browser.version.substr(0, 1) < 9) { // ie7&ie8
        jQuery('input[placeholder], textarea[placeholder]').each(function () {
        var input = jQuery(this);
          jQuery(input).val(input.attr('placeholder'));

        jQuery(input).focus(function () {
             if (input.val() == input.attr('placeholder')) {
                   input.val('');
              }
         });

         jQuery(input).blur(function () {
            if (input.val() == '' || input.val() == input.attr('placeholder')) {
                input.val(input.attr('placeholder'));
                    }
             });
       });
  }
Working Demo