Created
March 9, 2011 21:46
-
-
Save funkatron/863074 to your computer and use it in GitHub Desktop.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta charset="utf-8"> | |
| <title>Page Title</title> | |
| <script src="http://ajax.cdnjs.com/ajax/libs/json2/20110223/json2.js"></script> | |
| <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script> | |
| <script src="http://ajax.cdnjs.com/ajax/libs/less.js/1.0.41/less-1.0.41.min.js"></script> | |
| <script src="http://ajax.cdnjs.com/ajax/libs/underscore.js/1.1.4/underscore-min.js"></script> | |
| <script> | |
| (function( $ ){ | |
| $.fn.placeHolder = function(options) { | |
| var self = this; | |
| var settings = { | |
| 'placeholderText' : 'Placeholder Text', | |
| 'activeClass' : 'placeholder-active' | |
| }; | |
| if ( options ) { | |
| settings = $.extend( settings, options ); | |
| } | |
| this.bind = function() { | |
| this.unbind(); // always unbind first to avoid dupes | |
| this | |
| .live('focusin.placeholder', function(e) { | |
| var jqtarget = $(e.currentTarget); | |
| if(jqtarget.val() === jqtarget.attr('data-placeholder')) { | |
| jqtarget.val(""); | |
| jqtarget.removeClass(settings.activeClass); | |
| } | |
| }) | |
| .live('focusout.placeholder', function(e) { | |
| var jqtarget = $(e.currentTarget); | |
| if(jqtarget.val() == "" || jqtarget.val() === jqtarget.attr('data-placeholder')) { | |
| jqtarget.val(jqtarget.attr('data-placeholder')); | |
| jqtarget.addClass(settings.activeClass); | |
| } | |
| }); | |
| }; | |
| this.unbind = function() { | |
| this.die('focusin.placeholder').die('focusout.placeholder'); | |
| }; | |
| this.prep = function() { | |
| this.each(function(e) { | |
| var jqthis = $(this); | |
| jqthis.attr('data-placeholder', (jqthis.attr('placeholder') || settings.placeholderText)); | |
| jqthis.attr('placeholder', ''); | |
| jqthis.val(jqthis.attr('data-placeholder')); | |
| jqthis.addClass(settings.activeClass); | |
| }); | |
| return this; | |
| }; | |
| this.bind(); | |
| return this.prep(); | |
| }; | |
| })( jQuery ); | |
| </script> | |
| <style type="text/css" media="screen"> | |
| .placeholder-active { | |
| color:#999999; | |
| background:#EEEEEE; | |
| } | |
| </style> | |
| <script> | |
| $(document).ready(function() { | |
| $('input, textarea').placeHolder(); | |
| }); | |
| </script> | |
| </head> | |
| <body> | |
| <form> | |
| <p><input name="foo" value="" placeholder="bar"></p> | |
| <p><input name="foo2" value="" placeholder="superman"></p> | |
| <textarea name="foo3" placeholder="lorem ipsum"></textarea> | |
| </form> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment