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() { = false;
webkit_type = document.createElement('input');
if('placeholder' in webkit_type) = 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')) {
}).blur(function () {
if (($(this).attr('placeholder')) && ($(this).attr('placeholder').length > 0) && ($(this).attr('placeholder') != '') && ($(this).val() == '' || $(this).val() == $(this).attr('placeholder'))) {
$(':text, textarea, :password').blur();
$('form').submit(function () {
$(this).find('.hasPlaceholder').each(function() { $(this).val(''); });

Leave a Reply

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

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

Google+ photo

You are commenting using your Google+ 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 )


Connecting to %s