Back in 2008, along with new tags, HTML5 has introduced a very useful attribute, Placeholder, for input elements, but it was only supported in Internet Explorer 10 and other modern web browsers like Chrome, Firefox, and, etc. There are still a number of people out there using Internet Explorer with versions 7, 8 & 9 but fortunately, there are some ways to support placeholders in those older browsers with Javascript.
Before placeholders, we used to toggle default text in value attribute using a little bit of Javascript. You could still use these older methods for browsers that don’t support placeholders but I found a much simpler way to do it today.
Implementing placeholders in older browsers
I don’t want to claim any credit for the code on this page, I’ve just mixed it together and tested it on Internet Explorer 8 & 9 and made sure it doesn’t run on modern browsers. You may want to change it to suit your own use-cases or other functions you might have for detecting whether placeholders are supported (e.g. with Modernizr) or use vanilla Javascript instead of jQuery.
The testing for placeholder code comes from here.
function placeholderIsSupported() {
var test = document.createElement('input');
return ('placeholder' in test);
}
The jQuery placeholder code comes from here.
if(!placeholderIsSupported()) {
$('[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();
}
Note that the password placeholder will still be masked and will not show whatever text you have put in there as a placeholder.
