https://github.com/timmywil/html5placeholders

HTML5 placeholders across all browsers
https://github.com/timmywil/html5placeholders

Last synced: about 1 month ago
JSON representation

HTML5 placeholders across all browsers

• Host: GitHub
• URL: https://github.com/timmywil/html5placeholders
• Owner: timmywil
• Created: 2010-09-28T01:13:02.000Z (over 14 years ago)
• Default Branch: master
• Last Pushed: 2010-11-30T21:37:08.000Z (about 14 years ago)
• Last Synced: 2024-10-16T00:44:58.607Z (3 months ago)
• Language: JavaScript
• Homepage: http://timmywillison.com/samples/outofplace/
• Size: 105 KB
• Stars: 1
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
*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'

});