7
Replies
I'm a big fan of jQuery for these sorts of things. It's incredibly easy to use, depending on your initial comfort level with JavaScript, and is well worth learning if you're going down the Ajax library path.
The following is a basic example of creating a browser-like search box with jQuery. You can copy and paste this code into an HTML file and run it from any web browser (it gets the jQuery library from Google's Content Distribution Network for Ajax libraries):
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Browser-like Search Bar</title>
<!-- this loads the jQuery library from Google's CDN -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<!-- set the two CSS classes for the form field (on and off) -->
<style type="text/css">
.browser_search_clone_off{
border: 1px solid #333;
background-color: #CCC;
color: #999;
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size: 10px;
}
.browser_search_clone_on{
border: 1px solid #999;
background-color: #FFF;
color: #333;
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size: 11px;
}
</style>
</head>
<body>
<input type="text" id="search_field" name="search_field" value="Google" class="browser_search_clone_off" />
<script type="text/javascript">
// if you wanted to always reset the box's off state to the same value, set in a var
var base_value = 'Google';
// this is the jQuery goodness. this code block fires when the DOM is loaded
$(document).ready(function(){
// we bind an onFocus event handler to the search form to fire when the user enters the input
$('#search_field').focus(function(){
$(this).removeClass('browser_search_clone_off');
$(this).addClass('browser_search_clone_on');
$(this).val(''); // clears the form field
/*
if you wanted to select the text, rather than deleting it, you would only need to do this
$(this).select();
*/
});
// we bind an onBlur event handler to the search form to fire when the user leaves the input
$('#search_field').blur(function(){
$(this).removeClass('browser_search_clone_on');
$(this).addClass('browser_search_clone_off');
// if you like the notion of resetting it, this is all it takes
if($(this).val() != 'Google'){
$(this).val('Google');
}
})
});
</script>
</body>
</html>
As you can see, there's not a lot of JavaScript actually needed to generate the desired effect. Granted it looks like crap but I did only spend 5 minutes or so on it 
!
I did test it on Firefox 3.5 and Safari 4 but was too lazy to start my VM to test it in IE. Though, jQuery typically works equally great with IE7 and 8, and is pretty good with 6, too.
Thanks for the recommend of jQuery. I've used Prototype most-often (probably because it was the first such library that I seriously used).
Nevertheless, I have this one reservation about it ... I don't want to give up any part of what <cfform> and <cfinput> gratuitously provides me. ("I'm a lazy s.o.b.," 
and of course, laziness is a virtue among programmers.)
For example, I know that the <cfinput> tag can hook into the OnBlur event, and maybe other events, and I don't want to do something that interferes with what CF is doing for me. (Also, I don't want to have to peer too closely into the "guts and mechanics" of what CF is doing for me.) Otherwise, I feel that I might be introducing complexity and the potential of error for what is ... basically ... a "special effect." There is no return-on-investment if I make the app in any way error-prone just to do something that is "cute," when a "less-cute" application would have had the reliability that we already know we can count-on from Cold Fusion when left to its own devices.
Now, if you're telling me that I can safely "have my cake and eat it, too" ... within the context of a ColdFusion form and a ColdFusion input-box ... then I want to know more about that. But over-arching all of this is the primary concern that "I do not want this stuff failing in the field." If someone telephones me and says, "that's cute, but what's this error-message and why can't I use your application?" then I'm not where I want to be. I can easily give-up a "special effect" even if it's nice-to-have and asked-for.
That's my thoughts now. Your responses? Can my fears be assuaged?
Apparently the "official" word for this technique is overlabel.
An article published in December of 2006 entitled A List Apart: Making Compact Forms More Accessible (by Mike Brittain) discusses this technique, and in 2008 Brandon Aaron created a JQuery plugin for it.
Brittain's technique is interesting because he actually starts with the traditional HTML markup, with a <label> tag for each <input> tag. (Thus, if the user does not have JavaScript enabled, the markup nevertheless appears normally.) Then, he uses JavaScript to reposition the label itself so that it appears inside the box until the appropriate time.
Which, to my way of thinking, is a ...
Neat Hack!!
AdChoices