Skip to content

timmywil/html5placeholders

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

26 Commits
 
 
 
 
 
 

Repository files navigation

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

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

About

HTML5 placeholders across all browsers

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published