Skip to main content
T
TLC-IT
Inspiring
July 21, 2009
Question

Light-gray prompting text in an empty CFINPUT text-field?

  • July 21, 2009
  • 4 replies
  • 2254 views

At the upper-right corner of my IE screen right now, I see an empty box with the light-gray word "Google" in it.  When and if I click there, the word will vanish but in the meantime it serves as a cue for what I should type there.

Got it?  Great.  That's what I want to do in CF8.

Now of course, being a typical lazy programmer (remember:  "laziness is a virtue...") I want to know how to do this easily.  Does CF8 automagically provide this somewhere?  If not, is it easy to do?  (Yeah?  Great... How??)

This topic has been closed for replies.

4 replies

T
TLC-ITAuthor
Inspiring
July 23, 2009

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!!

-
-__cfSearching__-
Inspiring
July 24, 2009

Nice link TLC-IT.  Thanks for posting it.

T
TLC-ITAuthor
Inspiring
July 22, 2009

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?

C
craigkaminsky
Inspiring
July 22, 2009

I guess much of what your asking depends on how you use cfinput for this particular field. If you are adding some auto-magic CF stuff to that field via the cfinput tag, then I would stay away from the jQuery. If you're not using the onblur or onfocus event handlers from the cf tag, then it should not be an issue. Of course, if you're using the onblur or onfocus attribute of cfinput to execute a custom JS function, you could still use jQuery (or Prototype, etc.) in those custom JS functions to easily accomplish the effect.

Long story short, as long as you're not using any auto-magic stuff of cfinput, you should be good to go!!

C
craigkaminsky
Inspiring
July 21, 2009

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.

ilssac
ilssac
Inspiring
July 21, 2009

Sorry, I know of no CF8 wizzard tag that will automagically make the javascript for you to support that functionality.

But the JavaScript is pretty easy.

A text form field with the word "Google," or whatever value of your choice,  set as the default.

An onClick event attached that that form field such that when the user clicks in it, the default value is erased.  Probably should deactivate the onclick at this point as well, or future clicks on the control will erase whatever has been typed in by the user.

Message was edited by: Ian Skinner P.S. JQuery, or other JavaScript frameworks, probably have more wizard like syntax for this type of thing.  If you care to learn one.

-
-__cfSearching__-
Inspiring
July 21, 2009
Probably should deactivate the onclick at this point as well, or future clicks on the control will erase whatever has been typed in by the user.

Message was edited by: Ian Skinner P.S. JQuery, or other JavaScript frameworks, probably have more wizard like syntax for this type of thing.  If you care to learn one.

Either that or restore it only if the current value is different than the default.  Also, if you go the manual route you would probably want to toggle the text style/color as well.

Message was edited by: -==cfSearching==-  Well, now that I am actually searching with my eyes open, I see a ton of results.

Terms & ConditionsAccessibility statement
Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices