{"id":63403,"date":"2007-12-13T01:15:00","date_gmt":"2007-12-13T01:15:00","guid":{"rendered":"https:\/\/blogs.technet.microsoft.com\/heyscriptingguy\/2007\/12\/13\/hey-scripting-guy-how-can-i-change-the-background-color-of-a-text-box\/"},"modified":"2007-12-13T01:15:00","modified_gmt":"2007-12-13T01:15:00","slug":"hey-scripting-guy-how-can-i-change-the-background-color-of-a-text-box","status":"publish","type":"post","link":"https:\/\/devblogs.microsoft.com\/scripting\/hey-scripting-guy-how-can-i-change-the-background-color-of-a-text-box\/","title":{"rendered":"Hey, Scripting Guy! How Can I Change the Background Color of a Text Box?"},"content":{"rendered":"

\"Hey, <\/H2>\n

Hey, Scripting Guy! I have an HTA that we use for data entry. On this form, some of the fields are mandatory and some of them are optional. I\u2019d like to indicate the mandatory fields by making those text boxes a different color than the text boxes used for the optional fields. How do I do that?

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

Hey, IU. You know, for a large number of people around the world the holiday season is fast approaching; that means that many of these people (the Scripting Guys included) are even-now desperately searching for those last-minute gifts. While the Scripting Guys don\u2019t endorse any products (although we would, and happily; it\u2019s just that no one\u2019s ever asked) we do<\/I> suggest you check out the SnapJack Pancake Cutter<\/B><\/A>. If you\u2019re like the Scripting Guys you typically don\u2019t eat pancakes for breakfast. Why not? Because pancakes are just too darned hard to cut! (Of course, that could<\/I> have something to do with the recipe we\u2019ve been using. Is it flour and<\/I> milk? Because we\u2019ve been using flour or<\/I> milk in ours.)<\/P>\n

But listen, now you can have your pancake and eat it, too. With the SnapJack\u2019s spring-activated handle you can quickly and easily cut your pancakes into eight equal pie-shaped pieces. Tired of having to throw away perfectly good pancakes simply because you couldn\u2019t cut them into equally-shaped sizes? Those days are long-gone.<\/P>\n\n<\/THEAD>\n\n\n
\n

Note<\/B>. Our favorite part of the SnapJack Pancake Cutter is actually the accompanying ad copy: \u201cWith one simple press of the handle the \u2018safe\u2019 plastic blades cut through your stack of pancakes.\u201d That\u2019s nice. But why is the word \u201csafe\u201d in quotation marks?<\/P><\/TD><\/TR><\/TBODY><\/TABLE>\n

<\/DIV>\n

In case you\u2019re wondering, at Microsoft we\u2019ve discontinued research on our version of the Pancake Cutter. Our prototype actually worked pretty well; unfortunately, people didn\u2019t like the fact that every time you pressed down on the handle the Pancake Cutter would say, \u201cSomeone is trying to cut your pancakes into eight equal pie-shaped pieces. Do you want to allow this?\u201d <\/P>\n\n<\/THEAD>\n\n\n
\n

Note to our friends and colleagues and Microsoft<\/B>. We\u2019re just joking<\/I>. After all, Microsoft would never spend all that time and effort on developing a Pancake Cutter.<\/P>\n

Instead, we\u2019d just go out and buy the company that makes the SnapJack cutter.<\/P><\/TD><\/TR><\/TBODY><\/TABLE>\n

<\/DIV>\n

You know, maybe we\u2019d be better off forgetting about pancake cutters and focusing on our own work. For a change. <\/P>\n\n<\/THEAD>\n\n\n
\n

Note<\/B>. That work happens to including writing about scripting. We thought we should clarify that for all of you who\u2019ve never been able to figure out what it is the Scripting Guys actually do<\/I>.<\/P>\n

Or at least what we\u2019re supposed<\/I> to do.<\/P><\/TD><\/TR><\/TBODY><\/TABLE>\n

<\/DIV>\n

We\u2019re assuming, IU, that you have an HTA that looks something like this:<\/P>\"HTA\" \n


As you can see, there\u2019s not much to this HTA. In fact, the HTA consists solely of three text boxes, one labeled Name<\/B> (although we named the text box UserName, to prevent any problems with using reserved keywords like Name<\/I>); one labeled Address<\/B>; and one labeled Phone<\/B>. In this case, Name is the only mandatory field; therefore, we\u2019ve colored that text box a nice, bright yellow, leaving the remaining two text boxes the boring old default color, white.<\/P>\n

So how<\/I> did we color the Name text box a nice, bright yellow? Why, like this, of course:<\/P>

<body>\n    Name<br>\n    <input type=”text” name=”UserName” size=”25″ style=”background-color:yellow”><p><\/p>\n
    Address<br>\n    <input type=”text” name=”Address” size=”25″><p><\/p>\n
    Phone<br>\n    <input type=”text” name=”Phone” size=”25″><p>\n<\/body>\n<\/PRE>\n
Like we said, there\u2019s not much to this HTA. As we noted, we have three labels and three text boxes; the HTML tagging for the Address text box looks like this:<\/P>
Address<br>\n<input type=”text” name=”Address” size=”25″><p>\n<\/PRE>\n
That\u2019s about as basic as you can get; after indicating that we want to create a text box (input type=”text”<\/B>) we tack on two parameters:<\/P>\n\n\n\n\n
\u2022<\/TD>\n\n
name=”Address”<\/B>, which sets the name for the control.<\/P><\/TD><\/TR>\n
\u2022<\/TD>\n\n
size=”25″<\/B>, which sets the size of the box. In this case the size is (approximately) the width of the text box, in characters.<\/P><\/TD><\/TR><\/TBODY><\/TABLE>\n
The tagging for the Phone text box is very similar. In fact, even the tagging for the Name text box is very similar, with one important exception:<\/P>
Name<br>\n<input type=”text” name=”UserName” size=”25″ style=”background-color:yellow”><p>\n<\/PRE>\n
Most likely you\u2019ve already identified that important exception. If you haven\u2019t, we\u2019ll give you a hint; it\u2019s the style<\/B> parameter:<\/P>
style=”background-color:yellow”\n<\/PRE>\n
That\u2019s<\/I> how we made our text box a nice, bright yellow: we added the style parameter, and set the value of the background-color<\/B> property to yellow. Would you rather have a BlanchedAlmond- or PapayaWhip-colored text box instead? Then just set the value of the background-color property accordingly:<\/P>
style=”background-color:papayawhip”\n<\/PRE>\n\n<\/THEAD>\n\n\n
\n
Note<\/B>. Yes, now that you mention it, Scripting Guy Dean Tsaltas was<\/I> a boxer at one time in his life. But as far we know he never fought under the name Papaya Whip.<\/P><\/TD><\/TR><\/TBODY><\/TABLE>\n
<\/DIV>\n
That was<\/I> easy, wasn\u2019t it? In fact, that was about as easy as cutting pancakes with the SnapJack Pancake Cutter. (Just in case the good folks at SnapJack are looking for a spokesperson.) As it is, it might have been a little too<\/I> easy; we still have a few minutes to kill before lunch. With that in mind, let\u2019s show you a little variation on our colored-text box code:<\/P>
<SCRIPT Language=”VBScript”>\n    Sub SetNameColor\n         If Len(UserName.Value) <> 0 Then\n             UserName.style.background = “cyan”\n         Else\n             UserName.style.background = “yellow”\n         End If\n     End Sub\n<\/SCRIPT><\/p>\n
<body>\n    Name<br>\n    <input type=”text” name=”UserName” size=”25″ style=”background-color:yellow” onChange=”SetNameColor”><p><\/p>\n
    Address<br>\n    <input type=”text” name=”Address” size=”25″><p><\/p>\n
    Phone<br>\n    <input type=”text” name=”Phone” size=”25″><p>\n<\/body>\n<\/PRE>\n
So how does this HTA code differ from the HTA code we showed you a few minutes ago? Well, for starters, notice that we added another parameter to the UserName box. In fact, we added this<\/I> parameter: <\/P>
onChange=”SetNameColor”\n<\/PRE>\n
This simply tells the HTA that any time the value in the UserName text box changes (that is, any time UserName\u2019s onChange<\/B> event is fired) then the HTA should run the subroutine SetNameColor.<\/P>\n
And what does SetNameColor do? Well, the first thing it does is use the VBScript Len<\/B> function to count the number of characters in the UserName text box:<\/P>
If Len(UserName.Value) <> 0 Then\n<\/PRE>\n
If Len returns a value other than 0 that means that something has been entered into the text box; in that case, the subroutine then uses this line of code to change the background color of the text box to cyan:<\/P>
UserName.style.background = “cyan”\n<\/PRE>\n\n<\/THEAD>\n\n\n
\n
Note<\/B>. Yes, that is correct. When changing the color of a text box programmatically you refer to the background<\/B> property rather than the background-color property.<\/P><\/TD><\/TR><\/TBODY><\/TABLE>\n
<\/DIV>\n
But what if Len does<\/I> return a 0? Well, that means that nothing has been entered in the text box. (For example, someone entered a name, then thought better of it and went in and deleted that value.) In that case, the subroutine uses this line of code to reset the background color to yellow:<\/P>
UserName.style.background = “yellow\n<\/PRE>\n
We have no idea how useful that might be to anyone. But it was kind of fun to play around with. Just like the SnapJack Pancake Cutter. (Hint, hint.)<\/P>\n\n<\/THEAD>\n\n\n
\n
Note<\/B>. We should probably make clear that the Scripting Guys have nothing against the Snapjack Pancake Cutter. In fact, the SnapJack actually looks like a pretty nice little product; we\u2019re just not sure it holds a lot of interest for the typical system administration scripter. So what does<\/I> hold a lot of interest for the typical system administration scripter? To learn the answer, stay tuned to the Script Center; sometime in the next couple days we\u2019ll bring you a holiday gift guide that should be a little more to your liking.<\/P>\n
Well, unless you eat an awful lot of pancakes, that is. In that case, the SnapJack Pancake Cutter might be just exactly what you were looking for.<\/P><\/TD><\/TR><\/TBODY><\/TABLE><\/p>\n","protected":false},"excerpt":{"rendered":"
Hey, Scripting Guy! I have an HTA that we use for data entry. On this form, some of the fields are mandatory and some of them are optional. I\u2019d like to indicate the mandatory fields by making those text boxes a different color than the text boxes used for the optional fields. How do I […]<\/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-63403","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! I have an HTA that we use for data entry. On this form, some of the fields are mandatory and some of them are optional. I\u2019d like to indicate the mandatory fields by making those text boxes a different color than the text boxes used for the optional fields. How do I […]<\/p>\n","_links":{"self":[{"href":"https:\/\/devblogs.microsoft.com\/scripting\/wp-json\/wp\/v2\/posts\/63403","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=63403"}],"version-history":[{"count":0,"href":"https:\/\/devblogs.microsoft.com\/scripting\/wp-json\/wp\/v2\/posts\/63403\/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=63403"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/scripting\/wp-json\/wp\/v2\/categories?post=63403"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/scripting\/wp-json\/wp\/v2\/tags?post=63403"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}