Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
HTML5 placeholders across all browsers
JavaScript
Branch: master

Fetching latest commit…

Cannot retrieve the latest commit at this time

Failed to load latest commit information.
README.md
jquery.outofplace.js
jquery.outofplace.min.js

README.md

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)

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

ABOUT OUT OF PLACE

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).

PLUGIN USAGE

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;
}

Available options

$('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'
});
Something went wrong with that request. Please try again.