{"id":64433,"date":"2007-07-17T13:23:00","date_gmt":"2007-07-17T13:23:00","guid":{"rendered":"https:\/\/blogs.technet.microsoft.com\/heyscriptingguy\/2007\/07\/17\/how-can-i-display-a-default-message-if-nothing-has-been-typed-into-a-text-box\/"},"modified":"2007-07-17T13:23:00","modified_gmt":"2007-07-17T13:23:00","slug":"how-can-i-display-a-default-message-if-nothing-has-been-typed-into-a-text-box","status":"publish","type":"post","link":"https:\/\/devblogs.microsoft.com\/scripting\/how-can-i-display-a-default-message-if-nothing-has-been-typed-into-a-text-box\/","title":{"rendered":"How Can I Display a Default Message If Nothing Has Been Typed Into a Text Box?"},"content":{"rendered":"

\"Hey, <\/P>\n

Hey, Scripting Guy! Sometimes you go to a Web page and you\u2019ll see a text box that includes some instructions, something like \u201cPlease type a description in this box.\u201d When you click on the text box, those instructions disappear; however, if you click on the box, don\u2019t type in a description and then click somewhere else, then the instructions reappear. How can I do that same thing in an HTA?

— AJ <\/P>\n

\"Spacer\"\"Hey,\"Script<\/A> <\/P>\n

Sorry; the Scripting Guy who writes this column is a little out of breath this morning; that\u2019s because he was in a race around 6:30 AM, and hasn\u2019t fully recovered. And in case you\u2019re wondering, that\u2019s a race he wasn\u2019t expecting to be in, a race he didn\u2019t realize he even was<\/I> in, and a race in which he was soundly and decisively defeated.<\/P>\n

Sometime in the past month or so the Scripting Guys began starting off each day by eating a ceremonial doughnut. The ritual works like this. Each morning, on his way to work, the Scripting Guy who writes this column stops at the store and buys doughnuts. And each morning the remaining team members eat those doughnuts. Do any of these remaining team members ever buy doughnuts? Do any of these remaining team members at least help pay<\/I> for these doughnuts? Let\u2019s put it this way: do any of these remaining team members ever do anything<\/I>?<\/P>\n

\n\n<\/THEAD>\n\n\n
\n

Note<\/B>. Yes, this is exactly<\/I> like the story of the Little Red Hen<\/B><\/A>. \u201cWho will help me buy these doughnuts?\u201d says the Little Red Hen who writes this column. No answer. \u201cWho will help me pay for these doughnuts?\u201d says the Little Red Hen who writes this column. \u201cNow, who will help me eat<\/I> these doughnuts?\u201d says the Little Red Hen who writes this column.<\/P>\n

You can figure out the rest on your own.<\/P><\/TD><\/TR><\/TBODY><\/TABLE><\/P>\n

<\/DIV>\n

At any rate, this morning the Scripting Guy who writes this column was grabbing a couple of doughnuts out of the doughnut case when he noticed an older woman taking a muffin out of the muffin case. (He noticed her because, for some reason, it\u2019s very unusual for him to ever<\/I> see anyone who\u2019s older than he is. That hasn\u2019t always been the case, but over the past few years something seems to have changed.)<\/P>\n

Having grabbed his two doughnuts the Scripting Guy who writes this column began making his way towards the only open cash register. As he did so, he noticed that the muffin lady was scurrying to catch up to and then pass him. Unfortunately, she wasn\u2019t particularly fast, and the Scripting Guy who writes this column was able to keep pace with her, even though he was moseying along in his typical fashion. (In his defense, however, he was<\/I> on his way to work; it goes without saying that he was in no hurry whatsoever.)<\/P>\n

As they approached the checkout stand, the lady took a desperate lunge and cut in front of the Scripting Guy who writes this column, a Scripting Guy who had to stop abruptly to make sure he didn\u2019t crash into the woman. The muffin lady paid for her purchase and left. The Scripting Guy who writes this column then did the same thing, calculating that the muffin lady had saved nearly 30 seconds by getting to the checkout stand ahead of him. <\/P>\n

And yes, that means that the Scripting Guy who writes this column could have saved 30 seconds of his own valuable time by forcing the issue and trying to beat the muffin lady to the checkout stand. But the Scripting Guy who writes this column lives such an exciting, fun-filled life that he decided he could afford to waste 30 seconds. And so he did.<\/P>\n

Of course, that doesn\u2019t mean that the Scripting Guy who writes this column can always<\/I> afford to waste 30 seconds out of his life. After all, that might not leave time for his other daily rituals, like the one in which he tells people how to create a text box that displays a default message, causes that message to disappear when the text box gets the focus, then causes that message to reappear<\/I> if the user doesn\u2019t end up entering a new value in the box.<\/P>\n

Not sure what that actually means? Then copy the following code, paste it into Notepad, save the resulting file as an HTML Application (HTA<\/B><\/A>), and then give it a try for yourself:<\/P>

<SCRIPT LANGUAGE=”VBScript”><\/p>\n
Sub TextBoxEnter\n    If TextBox1.Value = “Please enter a value here.” Then\n        TextBox1.Value = “”\n    End If     \nEnd Sub<\/p>\n
Sub TextBoxLeave\n    If TextBox1.Value = “” Then\n        TextBox1.Value = “Please enter a value here.”\n    End If     \nEnd Sub<\/p>\n
<\/SCRIPT><\/p>\n
<body>\n    <input type=”text” name=”TextBox1″ size=”50″ value=”Please enter a value here.” \n     onFocus = “TextBoxEnter” onFocusOut=”TextBoxLeave”><p>\n    <input type=”text” name=”TextBox2″ size=”50″>\n<\/body>\n<\/PRE>\n
Good idea: let\u2019s take a closer look at the code and see if we can figure out how this HTA works. To begin with, it\u2019s a very simple little HTA; for one thing, the body consists of just two controls (a pair of text boxes). One text box \u2013 which we named TextBox2 \u2013 is just a plain old text box; that\u2019s why the HTML tagging is so concise:<\/P>
<input type=”text” name=”TextBox2″ size=”50″>\n<\/PRE>\n
The other text box, which we named TextBox1 (and no, we didn\u2019t hire a consultant to help us; we came up with these names all by ourselves) is a little fancier:<\/P>
<input type=”text” name=”TextBox1″ size=”50″ value=”Please enter a value here.”\nonFocus = “TextBoxEnter” onFocusOut=”TextBoxLeave”>\n<\/PRE>\n
So what is<\/I> all that fancy stuff? For starters, we need to have a default value assigned to this text box; when you first open the HTA we want the text box to display the message Please enter a value here.<\/B> That\u2019s why we added the value<\/B> parameter, like so:<\/P>
value=”Please enter a value here.”\n<\/PRE>\n
In addition to having a default value, we also need this text box to respond to two different events: onFocus<\/B>, an event triggered any time someone clicks onto or otherwise selects the text box; and onFocusOut<\/B>, an event triggered any time someone clicks out of or otherwise moves the focus away<\/I> from the text box. When either of those events occur we need to run the appropriate subroutine; each time the text box gets the focus we want to run a subroutine named TextBoxEnter, and each time the text box loses the focus we want to run a subroutine named TextBoxLeave.<\/P>\n
\n\n<\/THEAD>\n\n\n
\n
Note<\/B>. OK, for those subroutine names we did<\/I> have to hire a high-priced consulting firm. But usually we come up with our own names for everything.<\/P>\n
Which explains how we ended up with family members and pets that have names like the Scripting Son and the Scripting Dog.<\/P><\/TD><\/TR><\/TBODY><\/TABLE><\/P>\n
<\/DIV>\n
As you might expect, all the fun stuff occurs inside those two subroutines. Let\u2019s start out by looking at the subroutine that runs any time the text box gains the focus:<\/P>
Sub TextBoxEnter\n    If TextBox1.Value = “Please enter a value here.” Then\n        TextBox1.Value = “”\n    End If     \nEnd Sub\n<\/PRE>\n
By default, our text box displays the message Please enter a value here<\/I>. That\u2019s fine; after all, that\u2019s what we want<\/I> the text box to display. However, we don\u2019t want to always<\/I> display that message; if someone clicks inside the text box we\u2019d like that message to disappear. (Otherwise they\u2019d have to select the message, delete it, and then<\/I> start typing in a value.) So how do we make the message disappear? That\u2019s easy; we simply set the value of the text box to an empty string:<\/P>
TextBox1.Value = “”\n<\/PRE>\n
Note, however, that we don\u2019t set the value of the text box to an empty string any<\/I> time that control gets the focus; instead, we \u201creset\u201d the text box only if the message \u201cPlease enter a value here.\u201d happens to be displayed. Why do we do that? Well, suppose someone enters a value like the following into the text box:<\/P>
Pharmaceutical Research Division, Fabrikam Corp\n<\/PRE>\n
As you can see, the period was left off the end; the value typed into the box should have really been this:<\/P>
Pharmaceutical Research Division, Fabrikam Corp.\n<\/PRE>\n
But that\u2019s no big deal; after all, the user can just click at the end of the text box and then type in the missing period. Or, to be a little more precise, they can do that as long as we don\u2019t automatically delete the value of the text box each time the text box regains the focus. That\u2019s<\/I> why we don\u2019t automatically reset the value of the text box; we do that only if the default value (\u201cPlease enter a value here.\u201d) is displayed. Otherwise any time someone clicked in the text box we\u2019d erase everything they\u2019d previously typed into the box. That might be OK. But, then again, it might not be.<\/P>\n
Now, what happens when the text box loses<\/I> the focus? This is what happens:<\/P>
Sub TextBoxLeave\n    If TextBox1.Value = “” Then\n        TextBox1.Value = “Please enter a value here.”\n    End If     \nEnd Sub\n<\/PRE>\n
In effect, our onFocusOut subroutine is a mirror image of the onFocus subroutine. This time around, we check to see if the value of TextBox1 is equal to an empty string. If it is, that means that nothing at all has been typed into the text box. As a result, we set the value of the box to the default message: Please enter a value here<\/I>. That\u2019s ensures that we never have a truly empty text box; if the box is<\/I> empty we redisplay the default message. And what do we do if something other than the default value has been typed into the text box? Nothing; as long as the text box has something<\/I> in it we simply leave the value alone. Combined, these two subroutines should provide the very behavior you were looking for.<\/P>\n
Now, to tell you the truth, the Scripting Guy who writes this column wasn\u2019t all that distraught about the muffin lady having beaten him to the checkout stand; in fact, he really didn\u2019t pay much attention to it. Apparently, however, the muffin lady did<\/I> give it some thought; as the Scripting Guy who writes this column left the store the muffin lady was waiting for him. \u201cI\u2019m sorry I raced in front of you,\u201d she said. \u201cThat was very rude of me. I should have let you go ahead of me.\u201d<\/P>\n
She should have let<\/I> him get ahead of her? You know, if you\u2019ve ever wondered how far the Scripting Guy who writes this column has fallen that should answer your question: little old ladies are now apologizing for being too fast and not letting<\/I> him get ahead of them. <\/P>\n
Gosh, if little old ladies are passing him by that means that the Scripting <\/I>Ed<\/I>itor<\/I> might soon be passing him by as well. Now there\u2019s a scary thought \u2026.<\/P><\/p>\n","protected":false},"excerpt":{"rendered":"
Hey, Scripting Guy! Sometimes you go to a Web page and you\u2019ll see a text box that includes some instructions, something like \u201cPlease type a description in this box.\u201d When you click on the text box, those instructions disappear; however, if you click on the box, don\u2019t type in a description and then click somewhere […]<\/p>\n","protected":false},"author":595,"featured_media":87096,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[1],"tags":[3,4,5,30],"class_list":["post-64433","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-scripting","tag-scripting-guy","tag-scripting-techniques","tag-vbscript","tag-web-pages-and-htas"],"acf":[],"blog_post_summary":"
Hey, Scripting Guy! Sometimes you go to a Web page and you\u2019ll see a text box that includes some instructions, something like \u201cPlease type a description in this box.\u201d When you click on the text box, those instructions disappear; however, if you click on the box, don\u2019t type in a description and then click somewhere […]<\/p>\n","_links":{"self":[{"href":"https:\/\/devblogs.microsoft.com\/scripting\/wp-json\/wp\/v2\/posts\/64433","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/devblogs.microsoft.com\/scripting\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/devblogs.microsoft.com\/scripting\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/scripting\/wp-json\/wp\/v2\/users\/595"}],"replies":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/scripting\/wp-json\/wp\/v2\/comments?post=64433"}],"version-history":[{"count":0,"href":"https:\/\/devblogs.microsoft.com\/scripting\/wp-json\/wp\/v2\/posts\/64433\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/scripting\/wp-json\/wp\/v2\/media\/87096"}],"wp:attachment":[{"href":"https:\/\/devblogs.microsoft.com\/scripting\/wp-json\/wp\/v2\/media?parent=64433"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/scripting\/wp-json\/wp\/v2\/categories?post=64433"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/scripting\/wp-json\/wp\/v2\/tags?post=64433"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}