Version: 1.1, Last updated: 11/9/2010
Demo - http://timmywillison.com/samples/outofplace/
GitHub - http://github.com/timmywil/html5placeholders
Source - http://github.com/timmywil/html5placeholders/raw/master/jquery.outofplace.js (3.2kb)
(Minified) - http://github.com/timmywil/html5placeholders/raw/master/jquery.outofplace.min.js (820b)</br/>
License
Copyright (c) 2010 timmy willison
Dual licensed under the MIT and GPL licenses.
http://timmywillison.com/licence/
Support and Testing
Versions of jQuery and browsers this was tested on.
jQuery Versions - 1.3.0-1.4.4
Browsers Tested - Internet Explorer 6-8, Firefox 2-3.7, Safari 3-5,
Chrome 4-6, Opera 9.6-10.5.
Release History
1.1 - (11/9/2010) Checks for browser autofill to accomodate placeholder class
1.0 - (9/27/2010) Initial release
HTML5 placeholders across all browsers
The purpose of this plugin is to be able to put your placeholders in the HTML5 placeholder attribute and have it work in IE6. There are several advantages to this. First, you get to use HTML5. Second, you can insert values (perhaps you already know what the value of a field should be) into the value attribute without it getting treated like a placeholder by some function you wrote to fake placeholders. Third, this plugin has even more functionality than the default HTML5 placeholder attribute. It gives you a class to add placeholder styles. By default, Safari and Firefox have different default colors for placeholders. With this plugin, you simply put what color you want placeholder text to be in your own css without worrying about browser-specific selectors. Plus, you can add other styles when that class is present (which is when the field is blurred).
Javascript
$('input[placeholder], textarea[placeholder]').outOfPlace();
Then, your HTML for all browsers will look like this:
<input type="text" placeholder="Name"/>
Your CSS will look something like this:
.place {
color: #666;
}
$('input[placeholder], textarea[placeholder]').outOfPlace({
// Gives you control over the submit function if needed
// The default function removes the placeholder before
// submitting the form in case the field is not required client-side
// This takes care of interfering with any server validation
submit: function () {
$(this).find('input, textarea').each(function () {
var $input = $(this);
if($input.val() == $input.data('placeholder'))
$input.val('');
});
return true;
},
// The placeholder class for setting
// placeholder styles in your own css
// e.g. input.place { color: #666666; }
placeClass: 'place'
});