Skip to content

Instantly share code, notes, and snippets.

@johnathan-sewell
Created May 24, 2011 14:30
Show Gist options
  • Save johnathan-sewell/988809 to your computer and use it in GitHub Desktop.
Save johnathan-sewell/988809 to your computer and use it in GitHub Desktop.
A quick and simple solution for browsers that don't support the text input placeholder attribute.
(function ($) {
$.fn.html5Placeholder = function () {
this.each(function(index) {
var placeHolderText = $(this).attr("placeholder");
if (placeHolderText) {
$(this).val(placeHolderText); //set the placeholder text as a text in the input box
$(this).focusin(function() { //remove the placeholder text on focusin
if ($(this).val() === placeHolderText)
$(this).val("");
});
$(this).focusout(function() { //put back the placeholder text on focusout
if ($(this).val() === "")
$(this).val(placeHolderText);
});
}
});
return this;
};
})(jQuery);
@johnathan-sewell
Copy link
Author

This is a JQuery plugin. Use with Modernizr:

    $("input").html5Placeholder();
}

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment