Skip to content

Instantly share code, notes, and snippets.

@AMHOL
Created December 18, 2012 11:11
Show Gist options
  • Save AMHOL/4327183 to your computer and use it in GitHub Desktop.
Save AMHOL/4327183 to your computer and use it in GitHub Desktop.
HTML5 placeholder fallback for browsers that don't support it, implemented in jQuery. NOTE: This will not work for elements added to the DOM after initial load
// Function to test for attribute support
function elSupportsAttr(el, attr) {
return attr in document.createElement(el);
}
// does input support placeholder? if not, add fallback
if ( !elSupportsAttr('input', 'placeholder') ) {
$(document).ready(function() {
// everything with placeholder attr
$('[placeholder]').each(function() {
$(this).val($(this).attr('placeholder'));
// remove on value focus
$(this).focus(function() {
if ( $(this).val() == $(this).attr('placeholder') ) $(this).val('');
});
// add value on (empty) blur
$(this).blur(function() {
if ( $(this).val().length == 0 ) $(this).val($(this).attr('placeholder'));
});
});
});
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment