TextBox Placeholder

Here's another neat one that I wrote a little while back which allows us to put a placeholder in a textfield.

The HTML:


Really only two changes from our standard text field; class is set to "fade" and it has a "defaulttext" in addition to value.

And it works like so; the box pre-populates with the phrase " reason for exam" (notice the space at the beginning... purely cosmetic, looks better that way). When the user clicks into the box it will blank out, and the cursor will present as though it had started blank and they may begin typing. Anything typed in will remain. However, if they leave the box blank, or delete out their text and click outside the box (or tab away) it will reinsert the default text.

The VGR:

Now we have two options in the VGR. If you want to allow the placeholder to also serve as a default entry for the order, no additional VGR is required. If you DO NOT want the placeholder to carry over into the order (as in the case for this text box) we will use

EDIT,IF,,cprompt_33_1,EQ," reason for exam",THEN
EDIT,SET,,cprompt_33_1,TO,"..."
anywhere above the order to bypass the prompt.

Easycheesy

The Script:

This script is very straightforward and should be included in your onLoad tools

//  ##########################  Fade  ########################## 
$(".fade").focus(function(){
 if ($(this).val() == $(this).attr("defaultText")){
  $(this).val("");
 }
}); 
$(".fade").blur(function(){
 if ($(this).val().length < 1 ){
  $(this).val($(this).attr("defaultText"));
 }
}); 

That's it, just another simple tool. Hope it helps.

1 comments:

  1. It becomes even more straightforward if you can populate the textbox with the "..." instead of the reminder note. Then, your VGR is even simpler.

    ReplyDelete