Placeholder Not Working in Internet Explorer

As you know if Placeholder is a new feature from HTML5, and almost all sites now using this new feature to make their site looked like a professional.

But, the big problem is: this feature is not working on old IE (including IE 8 and 9):

Can I use... Support tables for HTML5, CSS3, etc

 

If you check the image above, i have a chart that displaying which browser support this feature (placeholder). The one which is marked on red is not support this feature yet.

For me, it is a pain because of more than 30% person in the world is using Internet Explorer for their default browser. So, the question is: how to fix this placeholder in IE?

To fix this problem is very simple, if your WordPress theme have a JavaScript file, just put this code below to fix the placeholder problem (no configuration needed):

jQuery(function() {
jQuery.support.placeholder = false;
webkit_type = document.createElement('input');
if('placeholder' in webkit_type) jQuery.support.placeholder = true;
});
$(function() {
 
if(!$.support.placeholder) {
 
var active = document.activeElement;
 
$(':text, textarea, :password').focus(function () {
 
if (($(this).attr('placeholder')) && ($(this).attr('placeholder').length > 0) && ($(this).attr('placeholder') != '') && $(this).val() == $(this).attr('placeholder')) {
$(this).val('').removeClass('hasPlaceholder');
}
}).blur(function () {
if (($(this).attr('placeholder')) && ($(this).attr('placeholder').length > 0) && ($(this).attr('placeholder') != '') && ($(this).val() == '' || $(this).val() == $(this).attr('placeholder'))) {
$(this).val($(this).attr('placeholder')).addClass('hasPlaceholder');
}
});
 
$(':text, textarea, :password').blur();
$(active).focus();
$('form').submit(function () {
$(this).find('.hasPlaceholder').each(function() { $(this).val(''); });
});
}
});
Advertisements

Leave a Reply

Please log in using one of these methods to post your comment:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s