Monday, June 3, 2013

Placeholders on IE

Many developers face problem with HTML5 attribute "placehoder" on IE. HTML5 Placehoders are not visible on the Internet explorer. Get the placeholder attribute working on IE by just adding the below script.

Add the below code to your common or custom javascript page

jQuery(function() {
if(!jQuery.support.placeholder) { 
var active = document.activeElement;
jQuery(':text').focus(function () {
if (jQuery(this).attr('placeholder') != '' && jQuery(this).val() == jQuery(this).attr('placeholder')) {
jQuery(this).val('').removeClass('hasPlaceholder');
}
}).blur(function () {
if (jQuery(this).attr('placeholder') != '' && (jQuery(this).val() == '' || jQuery(this).val() == jQuery(this).attr('placeholder'))) {
jQuery(this).val(jQuery(this).attr('placeholder')).addClass('hasPlaceholder');
}
});
jQuery(':text').blur();
jQuery(active).focus();
jQuery('form').submit(function () {
jQuery(this).find('.hasPlaceholder').each(function() { jQuery(this).val(''); });
});
}

});

That's it !

Enjoy !!!

No comments:

Post a Comment