Time to rethink my old method of displaying textbox hints with background images. That method still works fine for compact login forms, but what if we have several textboxes on a page with different hints that may need changing. I don’t want to have to create/maintain images for each textbox hint, so I’d rather use text. Where should I get that text from though? I could use the label text, but sometimes that needs to be different from the hint. Take this search field for instance:
The label here would be “Search:”, but in the hint I want to give the user some examples of data they can search for. A great place to put this hint information is the title attribute of the textbox. For users without JavaScript, hovering an input with a title will show them a tooltip of the hint. Using jQuery though, we can enhance the experience quite a bit:
$('input.txbhint').focus(function() {
if ($(this).val() == "" || $(this).val() == $(this).attr('title')){
$(this).val("").removeClass("hinted");
}
}).blur(function() {
if ($(this).val() == "") {
$(this).val($(this).attr('title')).addClass("hinted");
}
}).filter(function() {
if ($(this).val() == "" || $(this).val() == $(this).attr('title')){
$(this).val($(this).attr('title')).addClass("hinted");
}
});
The jQuery code above simply sets the input’s title text as it’s value and colors it gray (via the “hinted” class) until the user focuses on it. When they do, the value gets removed and the text color gets set to black. If the user leaves the textbox and the value is still blank, we cleverly reset the text with the title text again and change the color back to gray.
For what it’s worth, this is how I do it too. 🙂
But, I’d suggest not coding the color of the text in the JS itself. Rather, just add/remove class names to achieve the same effect.
Better separation of style + behavior.
True. Done.
Isn’t there a jQuery plugin that does exactly this? I’m sure we use one like it here… ah, here it is:
Remy Sharp’s jquery.hint.js
Figures. Remy’s plugin looks like it prevents a few of other possible issues that my code doesn’t account for. I should do more research before I post stuff like this on a lunch-break whim. 🙂 Thanks Matthew!
Can someone help me how to use remy sharps jquery hint.
I have an input box test which also has jquery autocomplete plugin attached to it, as the user types it gives a list of names to choose from.
For this input box I would like to provide a hint saying lastname, firstname
so people can search based on lastname, firstname as they type in.
All i want is just display the hint if the value is empty for th input box. and once i click on the box the input should disappear and take the name typed in.
I would really appreciate your help. Please help me sooooooooooon.
thanks,
That’s essentially what the code above and Remy’s jQuery hint does. Perhaps the autocompelte plugin is interfering with it. Try taking out the autocomplete functionality and make sure your hints are showing up.
thanks for your suggestion. It works without autocomplete. Is there a way to make both things work together.