/!\ UPDATE 7/14/2010 /!\
HTML5 now supports the ‘placeholder’ attribute, which essentially renders my plugin useless.
I have started an html5 branch on the github repo, and will have a new version up soon that checks browser support and only triggers on older browsers. The “value” option will be deprecated in favor of the placeholder attribute.
***UPDATE 1/27/2010: I have created a github repository for this plugin, and added password field support! ***
Download the plugin here.
Original post which needs to be updated to reflect the changes in the plugin (but the idea is the same):
So you’ve got some input fields, maybe a search bar, or a name field, an email field, whatever. You’d like it to be smooth and show the required info in the field, and have it clear when your customers focus on it. How slick would that be? Well, I have written 12 lines of jQuery that will make your forms even sweeter.
Let’s start with the basics.
First, you need jQuery. I recommend linking the Google-hosted jQuery script, as this may someday help optimize your web site. The idea is that if enough people are using the hosted libraries, then there’s a good chance that your visitors have already cached the file, helping your site load faster.
Next, you need a javascript file for holding all your functions and making calls to those and the built in jQuery libraries. I call mine “functions.js”. So create that and link it after your jQuery script:
<script src="http://www.google.com/jsapi"></script>
<script>
google.load('jquery','1.4.1');
</script>
<script src="js/functions.js" type="text/javascript"></script>
In your HTML, you need an input field. Let’s use a search box for our example.
<input id="txtSearch" type="text" value="Search for Keyword(s)" />
Here we will get a standard textbox with the words “Search for Keyword(s)” in it. Now, we could write a function that clears the text when the user clicks, and it would be very easy, like this:
$("#txtSearch").click(function(){ $(this).attr({ value: '' }); });
We’re presented with a few problems, however:
- The value won’t clear if the visitor doesn’t have JavaScript enabled.
- It only works “on click”. What if the user tabs to your field? Use “on focus” instead.
- The value will clear even if the visitor typed their own text in already. This violates the usability rule that you should always preserve users’ data.
So what steps can we take to fix this? First, let’s remove the default value from the HTML:
<input id="txtSearch" type="text" />
Now let’s modify our JavaScript to add the default value, and clear it when clicked, but only clear if the default value is in the field.
$("#txtSearch").attr({ value: 'Search for Keyword(s)' }).focus(function(){
if($(this).val()=="Search for Keyword(s)"){
$(this).val("");
}
});
Now we have a search field that gets a default value and clears when the visitor brings focus (through click or tabbing) to the field, but only when the default value is found in the field.
So, what if the visitor tabs through to the next field and forgets what the newly empty field was for?
Did you really think I’d leave this detail out? It’s simple. We add a function to re-fill the field with our default value on blur if the current value is found to be empty:
$("#txtSearch").attr({ value: 'Search for Keyword(s)' }).focus(function(){
if($(this).val()=="Search for Keyword(s)"){
$(this).val("");
}
}).blur(function(){
if($(this).val()==""){
$(this).val("Search for Keyword(s)");
}
});
So can this get any better? You bet! We can make the default value have a lighter text color and give the visitor input a darker color. We can also turn this into a function so it can be applied to any field in our DOM! Let’s do it!
function autoFill(id, v){
$(id).css({ color: "#b2adad" }).attr({ value: v }).focus(function(){
if($(this).val()==v){
$(this).val("").css({ color: "#333" });
}
}).blur(function(){
if($(this).val()==""){
$(this).css({ color: "#b2adad" }).val(v);
}
});
}
Just pass the ID of the field and the default value you want it to have:
autoFill($("#txtSearch"), "Enter Search Keyword(s)");
That’s it, now go check out the demo and feel free to copy!
