Skip to content

Instantly share code, notes, and snippets.

@mdigital
Created June 27, 2013 09:53
Show Gist options
  • Save mdigital/5875308 to your computer and use it in GitHub Desktop.
Save mdigital/5875308 to your computer and use it in GitHub Desktop.
Placeholder polyfill that support's password fields - based on Remy Sharp's jquery plugin
jQuery.fn.hint = function (blurClass) {
if (!blurClass) {
blurClass = 'blur';
}
return this.each(function () {
// get jQuery version of 'this'
var $input = jQuery(this),
// capture the rest of the variable to allow for reuse
title = $input.attr('title'),
$form = jQuery(this.form),
$win = jQuery(window),
type = $input.attr('type');
function remove() {
if ($input.val() === title && $input.hasClass(blurClass)) {
$input.val('').removeClass(blurClass);
}
if ($input.attr('type') === 'password' && $input.hasClass(blurClass)) {
//console.log($input);
$input.next().hide();
}
}
// if its a password field, add a hint div
if (type === "password") {
$input.after('<div class="input-hint">'+title+'</div>');
$input.next().show();
}
// only apply logic if the element has the attribute
if (title) {
// on blur, set value to title attr if text is blank
$input.blur(function () {
if (this.value === '') {
if ($input.attr('type') === 'password') {
$input.next().show();
} else {
$input.val(title);
}
$input.addClass(blurClass);
}
}).focus(remove).blur(); // now change all inputs to title
// clear the pre-defined text when form is submitted
$form.submit(remove);
$win.unload(remove); // handles Firefox's autocomplete
}
});
};
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment