public
Last active — forked from kaelig/placeholder.css

Applies placeholder attribute behavior in web browsers that don't support it

  • Download Gist
placeholder.css
CSS
1 2 3 4 5 6 7
input {
color: #444;
background: white;
}
input.placeholder {
color: #aaa;
}
placeholder.js
JavaScript
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script>
$(document).ready(function() {
// Applies placeholder attribute behavior in web browsers that don't support it
if (!('placeholder' in document.createElement('input'))) {
 
$('input[placeholder]').each(function() {
$(this).data('originalText', $(this).val()).data('placeholder', $(this).attr("placeholder"));
 
if (!$(this).data('originalText').length)
$(this).val($(this).data("placeholder")).addClass('placeholder');
$(this)
.bind("focus", function () {
if ($(this).val() === $(this).data('placeholder'))
$(this).val("").removeClass('placeholder');
})
.bind("blur", function () {
if (!$(this).val().length)
$(this).val($(this).data('placeholder')).addClass('placeholder');
})
.parents("form").bind("submit", function () {
// Empties the placeholder text at form submit if it hasn't changed
if ($(this).val() === $(this).data('placeholder'))
$(this).val("").removeClass('placeholder');
});
});
 
// Clear at window reload to avoid it stored in autocomplete
$(window).bind("unload", function () {
$('input[placeholder]').each(function(index) {
if ($(this).val() === $(this).data('placeholder'))
$(this).val("");
});
});
}
});
</script>

Please sign in to comment on this gist.

Something went wrong with that request. Please try again.