Thursday, February 23, 2012

HTML5 Placeholder in IE7 and IE8 fixed with jquery

Using HTML5 Placeholder attribute in IE7 and IE8 is possible with the help of a block of jquery code.
Here goes the code -

//Assign to those input elements that have 'placeholder' attribute
if($.browser.msie){
   $('input[placeholder]').each(function(){ 
       
        var input = $(this);       
       
        $(input).val(input.attr('placeholder'));
               
        $(input).focus(function(){
             if (input.val() == input.attr('placeholder')) {
                 input.val('');
             }
        });
       
        $(input).blur(function(){
            if (input.val() == '' || input.val() == input.attr('placeholder')) {
                input.val(input.attr('placeholder'));
            }
        });
    });
};