Input Field Hints Plugin for jQuery
01.06.2009
While working on a site last year I needed to display a message in an input field that would disappear once the user clicked on the field. This is a very common technique you see around the web.
I do not have a lot of experience with JavaScript, so, with permission I started poking around my webucating buddy, Jeff Brown’s site, which uses the technique for the search bar. At that time I was also reading Learning jQuery from Packt publishing. Towards the end of the book it started talking about plugin creation. Great! I knew enough from working with other web languages that there is no need to repeat code when it could be done once with a plugin rather than ten times for each field.
After a bit of working I came up with the following plugin:
//Plugin to add text to an input field that disappears on focus
jQuery.fn.inputFieldText = function(string) {
this.each(function() {
$(this).val(string);
$(this).focus(function(){
if ($(this).val() == string){
$(this).val('');
}
});
$(this).blur(function(){
if ($(this).val() == '' ){
$(this).val(string);
}
});
});
}
What this does is accepts a string as a parameter and places it inside of the input field you want to add the effect to.
Here is what it looks like when the plugin is in use:
$(‘input[name=name]’).inputFieldText(‘Your Name’);
$(‘input[name=email]’).inputFieldText(‘Your Email’);
Notice that instead of calling each form by a class, and hence add additional markup to your html, you can simply select the field you want by using the @name= selector. This will select the field with the name that you want (read more about advanced selectors on the jQuery documentation page).
I tried to do the same thing for textarea, but kept running into issues with different browsers not displaying the user inputted text properly after you clicked out of the field… I will revisit that in due time.
For now, please enjoy the jQuery input field hints plugin.
Comments
Holler at this article
Zac Gordon runs DaBrook.org for his web design and development students and anyone else studying the web. Read more about the site or ask a question.
DaBrook Tweets
In Class Now
- Web Design: Plans for maintaining client sites
- Web Development: Research Web Hosting
- Advanced Web @ MC: The power of semantic markup
Danny 01.16.09
Thats a neat little plugin indeed, thanks for sharing.
I wish there was an option to set the color of the hint, so that only when it is the hint text, it has this color and otherwise, it just uses the default color that was applied by the css.
Never wrote a jquery plugin, but since your code is so nice and clean, I will probably attempt to add this myself.
Thanks again.
Danny 01.16.09
maybe like this?
jQuery.fn.inputFieldText = function(string, hintClass) {
this.each(function() {
$(this).addClass(hintClass).val(string);
$(this).focus(function(){
if ($(this).val() == string){
$(this).removeClass(hintClass).val(’‘);
}
});
$(this).blur(function(){
if ($(this).val() == ‘’ ){
$(this).addClass(hintClass).val(string);
}
});
});
}
Zac Gordon 01.16.09
@Danny, thanks for addition to the plugin. That’s a nice little additional feature. I haven’t tried it yet, do it work?
Yeah, plugins are pretty simple with jQuery. I look forward to seeing what you come up with based on this simple example.
Danny 01.16.09
Yes, works very nicely.
I figured I go with the spirit of the day, and add a class instead of just a color.
One thing I was not sure how to do, is to let that additional hintClass argument be an optional one, but I noticed that the function works even when you call it without that additional argument. Not sure I understand why, unless the default behavior is that all arguments are optional?....
I found some other plugins that are doing the same, but they used a much longer code - I liked yours the best, and it does indeed look simple.
You gotta love jQuery right? Without it I would not have imagined myself working with that tedious DOM model….
Bob 10.3.09
What if you want to compare the text inputed by a user against a string. So I have a form with a bunch of questions. I need to check the user input to see if it’s the right answer and then add a hint if it’s wrong.
Ideas?
Zac Gordon 10.3.09
@Bob, you is that string hard coded or dynamic? jQuery does have a contains selector that you could use with a conditional statement.
Bob 10.3.09
@Zac, thanks. The answer will never change, so the form has like 5 questions and each question will have one unique answer.
So onblur of the input field I could check what the field contains, compare it against the answer and either do nothing if it’s right or popup an error with a hint in it?
The question is with say 5 answers to compare, do I also need to check the id of the input field and then do multiple conditionals such as if it’s question1 then check against this answer and if question2 etc…. on top of checking each answer?
wondering on hints on how to do that…
JAB 10.5.09
@Zac, thanks! i’m wondering the best way to remove the field hint prior to submitting the form (so that field hint values don’t get submitted). thanks!
Ritesh M Nayak 01.4.10
Great plugin. Love how easy it is to use and implement. Holler at JQuery and this!!
« To Ph.D or Not to Ph.D - A Reflection on Webucation and Qualification Standards | Web Gallery High - New Gallery Site for High School Websites »