Skip to content

Instantly share code, notes, and snippets.

@rutger1140
Forked from mrcgrtz/placeholder.js
Last active September 25, 2015 12:27
Show Gist options
  • Save rutger1140/921617 to your computer and use it in GitHub Desktop.
Save rutger1140/921617 to your computer and use it in GitHub Desktop.
Adds HTML5 placeholders when they are not supported by your browser. Uses jQuery.
/**
* HTML5 Placeholders for old browsers
* by Rutger Laurman
*
* Adds HTML5 placeholders to non-supported browsers with jQuery
* Fork from Marc Görtz
*/
var HTML5Placeholders;
HTML5Placeholders = {
addPlaceholders: function(props) {
var config, key, testform;
config = {
"class": "placeholder"
};
for (key in props) {
if (config.hasOwnProperty(key)) {
config[key] = props[key];
}
}
testform = $("<form><input type=\"text\"></form>");
$.extend($.support, {
placeHolder: !!($("input", testform)[0].placeholder !== undefined || $("input", testform)[0].placeHolder !== undefined)
});
if (!$.support.placeHolder) {
$("html").addClass("no-placeholder");
return $("input[placeholder], textarea[placeholder]").each(function() {
var placeholder;
placeholder = $(this).attr("placeholder");
$(this).bind({
focus: function() {
if ($(this).val() === placeholder) {
$(this).val("");
$(this).removeClass(config["class"]);
}
return $(this).attr("data-focused", "yes");
},
blur: function() {
if ($(this).val() === "") {
$(this).val(placeholder);
$(this).addClass(config["class"]);
}
return $(this).removeAttr("data-focused");
}
});
if ((($(this).val() === "") || ($(this).val() === placeholder)) && (!$(this).attr("data-focused"))) {
$(this).val(placeholder);
return $(this).addClass(config["class"]);
}
});
} else {
$("html").addClass("placeholder");
}
}
};
$(document).ready(function() {
return HTML5Placeholders.addPlaceholders();
});
@rutger1140
Copy link
Author

15-11-2012 Updated with HTML classes to use in CSS

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