• Download Gist
jQuery HTML5 placeholder fix.js
JavaScript
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33
// Released under MIT license: http://www.opensource.org/licenses/mit-license.php
 
// good javascript
(function ($) {
'use strict';
$(function () {
$('[placeholder]')
.focus(function () {
var input = $(this);
if (input.val() === input.attr('placeholder')) {
input.val('').removeClass('placeholder');
}
})
.blur(function () {
var input = $(this);
if (input.val() === '' || input.val() === input.attr('placeholder')) {
input.addClass('placeholder').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('');
}
});
});
});
})(jQuery);
 
// minified javascript
(function(j,p){j(function(){j("["+p+"]").focus(function(){var i=j(this);if(i.val()===i.attr(p)){i.val("").removeClass(p)}}).blur(function(){var i=j(this);if(i.val()===""||i.val()===i.attr(p)){i.addClass(p).val(c.attr(p))}}).blur().parents("form").submit(function(){j(this).find(p).each(function(){var i=j(this);if(i.val()===i.attr(p)){i.val("")}})})})})(jQuery,"placeholder");

I wrote a "better" version (conflict free, more performant, on document ready)
and a hand-minified version of it

https://gist.github.com/1320822

Does this work with passwords and textareas as well?

Thanks for a good solution!

There was a typo in the minified version ('c' is undefined on col.211), so I fixed it:
(function(j,p){j(function(){j("["+p+"]").focus(function(){var i=j(this);if(i.val()===i.attr(p)){i.val("").removeClass(p)}}).blur(function(){var i=j(this);if(i.val()===""||i.val()===i.attr(p)){i.addClass(p).val(i.attr(p))}}).blur().parents("form").submit(function(){j(this).find(p).each(function(){var i=j(this);if(i.val()===i.attr(p)){i.val("")}})})})})(jQuery,"placeholder");

Thanks for this. https://gist.github.com/379601 wasn't working in IE8.

Doesn't seem to work properly when using the HTML5 required attribute.

Awesome!! Thanks @rozboris

Shouldn't the placeholder be whatever you define, "Password" rather than "********"? How to accomplish that?

Please sign in to comment on this gist.

Something went wrong with that request. Please try again.