Input placeholder not showing in IE

May 25, 2012

Been using placeholder for inputs and noticed today on a client site it doesn't play well with IE. Did a couple google searches and found great (and easy to implement) lines of jquery that fixes the issue.

Here is the input:
<input type="text" placeholder="Enter your search text">

In IE the input showed up blank, of course.

I grabbed a few lines of jquery from hagenburgers git solution and it worked great:

$('[placeholder]').focus(function() {
var input = $(this);
if (input.val() == input.attr('placeholder')) {
input.val('');
input.removeClass('placeholder');
}
}).blur(function() {
var input = $(this);
if (input.val() == '' || input.val() == input.attr('placeholder')) {
input.addClass('placeholder');
input.val(input.attr('placeholder'));
}
}).blur().parents('form').submit(function() {
$(this).find('[placeholder]').each(function() {
var input = $(this);
if (input.val() == input.attr('placeholder')) {
input.val('');
}
})
});

male