public
Last active

HTML5 placeholder fallback that handles passwords (jquery)

  • Download Gist
input-placeholder.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 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53
/* JS fallback for HTML5 placeholder
* requires jQuery and Modernizr (to detect support)
* by Jon Raasch - @jonraasch - http://jonraasch.com/
* modified script from Nico Hagenburger: http://bit.ly/LgrkT0
*/
 
if(!Modernizr.input.placeholder){
$('[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')) {
// if password input have to clone it as a text input and then remove this later (otherwise it will show up as ******)
if ( input.attr('type') == 'password' ) {
var newInput = input.clone();
newInput.attr('type', 'text');
newInput.val(input.attr('placeholder'));
newInput.addClass('placeholder clone');
newInput.insertAfter(input);
input.hide();
// add focus state to remove this input and show / focus the original
newInput.focus(function() {
$(this).remove();
input.show().focus();
});
}
else {
input.addClass('placeholder');
input.val(input.attr('placeholder'));
}
}
}).blur();
$('[placeholder]').parents('form').submit(function() {
$(this).find('[placeholder]').each(function() {
var input = $(this);
if ( input.hasClass('clone') ) {
input.remove();
return;
}
 
if (input.val() == input.attr('placeholder')) {
input.val('');
}
})
});
}

Please sign in to comment on this gist.

Something went wrong with that request. Please try again.