JQuery HTML5 Placeholder Example
Some browsers such as Google Chrome already supports input placeholder values while others like Firefox (testing with 3.6.3) does not. Consider the following example:
<?php header('Content-Type: text/html; charset=UTF-8'); ?> <!DOCTYPE HTML> <html lang="en"> <head> <title>jQuery HTML5 Placeholder Example</title> <script type="application/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script> <script type="application/javascript" src="placeholder.js"> </script> </head> <body> <?php if (isset($_GET['uri'])) : ?> <p><?php echo htmlspecialchars($_GET['uri']); ?></p> <?php endif; ?> <form> <p><input name="uri" type="text" placeholder="http://web4that.com/"> <button>Send</button></p> </form> </body> </html>
You probably don't actually need any PHP in here as you can see what the submission value is in the browser location bar (the form defaults to the GET method) so feel free to take that out if you don't have a PHP server handy. If you leave it in, your browser will probably just ignore it anyway if you open the page directly.
The document should load the necessary jQuery library straight off the CDN so don't worry about that, as long as you have internet connectivity. Now, here is my custom placeholder.js script that essentially emulates the functionality of the placeholder attribute using the actual input field value. Remember that even though the browser might not recognise this particular attribute name and treat it specially, most modern browsers will actually populate all given attributes into the DOM so that you can access them later from a script.
// Last Modified: 2010-06-17 // // This program is free software: you can redistribute it and/or modify // it under the terms of the GNU General Public License as published by // the Free Software Foundation, either version 3 of the License, or // (at your option) any later version. // // This program is distributed in the hope that it will be useful, // but WITHOUT ANY WARRANTY; without even the implied warranty of // MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the // GNU General Public License for more details. // // You should have received a copy of the GNU General Public License // along with this program. If not, see <http://www.gnu.org/licenses/>. // Wrap our code in a self-calling closure to isolate scope. (function() { // If the current value of the input is empty, insert the placeholder. function populate() { var input = jQuery(this); if (input.val() == "") { input.val(input.attr("placeholder")); } }; // If the current value of the input is the placeholder, empty it. function depopulate() { var input = jQuery(this); if (input.val() == input.attr("placeholder")) { input.val(""); } }; // Execute as soon as the document is fully loaded. jQuery(function() { var inputs = jQuery("input[type=text]"); // Initially, populate the placeholder values. inputs.each(populate); // When an input receives focus, clear the placeholder value if used. inputs.focus(depopulate); // When an empty input loses focus, reinsert the placeholder value. inputs.blur(populate); // Before a form is submitted back, clear the placeholder values as necessary. jQuery("form").submit(function() { jQuery("input[type=text]", this).each(depopulate); }); }); })();
The above script is fairly well commented so you should be able to figure out what's going on. Also note that I'm using the increasingly popular self-calling closure method for great code modularity.
You could make this code a bit cooler by also changing the text to a different colour if the placeholder value is being used. If you normally have a dark grey or black colour, maybe change it to a lighter grey.
A very cool modular and semantic way would be to set a special CSS class on the input element while the placeholder value is being used and removing it afterwards, then you can style the placeholder text from your stylesheet. This should make the designers happy too! But I'll leave you to play with that.
One thing that bothers me about the above script is that if the user actually wants to use a value which just happens to be the same as the placeholder value, their value will be cleared before submission. This kinda sucks but in most cases this should not be a problem if you plan your placeholder values carefully. For example, example.com cannot be somebody's actual site.
One way to overcome this problem would be to use a CSS class as discussed above and then check for that in addition to checking the input value. (I'm saying "in addition to" rather than "instead of" for in case the input value was changed by another script somehow. But this probably isn't a concern to most people.) Then you can overcome this problem perfectly and add extra styling capability in the process, although this will complicate the script a little. In my particular case, this wasn't much of a worry anyway.
As a last thought, if you don't mind the extra include you could look at using something like Modernizr to check if built-in placeholder support exists before adding your own "artificial" support.
Any comments, please drop me a line!
