Skip to content

Instantly share code, notes, and snippets.

@mattclements
Created March 28, 2012 08:53
Show Gist options
  • Save mattclements/2224869 to your computer and use it in GitHub Desktop.
Save mattclements/2224869 to your computer and use it in GitHub Desktop.
Placeholder Support for IE6-8
/*
Original From: http://kamikazemusic.com/quick-tips/jquery-html5-placeholder-fix/
Additions by Matt Clements
Licence: http://mattclements.mit-license.org/
Adjusted to look at .change too
Added support for textarea's and pre-set values on fields
*/
$(document).ready(function() {
if (!Modernizr.input.placeholder) {
$("input").each(function() {
if ($(this).val() === "" && $(this).attr("placeholder") !== undefined && $(this).attr("placeholder") !== "") {
$(this).val($(this).attr("placeholder"));
$(this).addClass("placeholder");
}
if ($(this).attr("placeholder") !== undefined && $(this).attr("placeholder") !== "") {
$(this).focus(function() {
if ($(this).val() === $(this).attr("placeholder")) {
$(this).removeClass("placeholder").val("");
}
});
$(this).blur(function() {
if ($(this).val() === "") {
$(this).val($(this).attr("placeholder"));
$(this).addClass("placeholder");
}
});
$(this).change(function() {
if ($(this).val() !== "") {
$(this).removeClass("placeholder");
}
});
}
});
$("textarea").each(function() {
if ($(this).val() === "" && $(this).attr("placeholder") !== undefined && $(this).attr("placeholder") !== "") {
$(this).val($(this).attr("placeholder"));
$(this).addClass("placeholder");
}
if ($(this).attr("placeholder") !== undefined && $(this).attr("placeholder") !== "") {
$(this).focus(function() {
if ($(this).val() === $(this).attr("placeholder")) {
$(this).removeClass("placeholder").val("");
}
});
$(this).blur(function() {
if ($(this).val() === "") {
$(this).val($(this).attr("placeholder"));
$(this).addClass("placeholder");
}
});
$(this).change(function() {
if ($(this).val() !== "") {
$(this).removeClass("placeholder");
}
});
}
});
$('form').submit(function() {
$("input").each(function() {
if ($(this).val() === $(this).attr("placeholder")) {
$(this).val('');
}
});
$("textarea").each(function() {
if ($(this).val() === $(this).attr("placeholder")) {
$(this).val('');
}
});
});
}
});
@mattclements
Copy link
Author

And removed debugging :)

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