Hey, Scripting Guy! How Can I Change the Background Color of a Text Box?
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’d 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
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’t endorse any products (although we would, and happily; it’s just that no one’s ever asked) we do suggest you check out the SnapJack Pancake Cutter. If you’re like the Scripting Guys you typically don’t eat pancakes for breakfast. Why not? Because pancakes are just too darned hard to cut! (Of course, that could have something to do with the recipe we’ve been using. Is it flour and milk? Because we’ve been using flour or milk in ours.)
But listen, now you can have your pancake and eat it, too. With the SnapJack’s 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’t cut them into equally-shaped sizes? Those days are long-gone.
|
Note. Our favorite part of the SnapJack Pancake Cutter is actually the accompanying ad copy: “With one simple press of the handle the ‘safe’ plastic blades cut through your stack of pancakes.” That’s nice. But why is the word “safe” in quotation marks? |
In case you’re wondering, at Microsoft we’ve discontinued research on our version of the Pancake Cutter. Our prototype actually worked pretty well; unfortunately, people didn’t like the fact that every time you pressed down on the handle the Pancake Cutter would say, “Someone is trying to cut your pancakes into eight equal pie-shaped pieces. Do you want to allow this?”
|
Note to our friends and colleagues and Microsoft. We’re just joking. After all, Microsoft would never spend all that time and effort on developing a Pancake Cutter. Instead, we’d just go out and buy the company that makes the SnapJack cutter. |
You know, maybe we’d be better off forgetting about pancake cutters and focusing on our own work. For a change.
|
Note. That work happens to including writing about scripting. We thought we should clarify that for all of you who’ve never been able to figure out what it is the Scripting Guys actually do. Or at least what we’re supposed to do. |
We’re assuming, IU, that you have an HTA that looks something like this:
As you can see, there’s not much to this HTA. In fact, the HTA consists solely of three text boxes, one labeled Name (although we named the text box UserName, to prevent any problems with using reserved keywords like Name); one labeled Address; and one labeled Phone. In this case, Name is the only mandatory field; therefore, we’ve colored that text box a nice, bright yellow, leaving the remaining two text boxes the boring old default color, white.
So how did we color the Name text box a nice, bright yellow? Why, like this, of course:
<body>
Name<br>
<input type=”text” name=”UserName” size=”25″ style=”background-color:yellow”><p>
Address<br>
<input type=”text” name=”Address” size=”25″><p>
Phone<br>
<input type=”text” name=”Phone” size=”25″><p>
</body>
Like we said, there’s 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:
Address<br> <input type=”text” name=”Address” size=”25″><p>
That’s about as basic as you can get; after indicating that we want to create a text box (input type=”text”) we tack on two parameters:
| • |
name=”Address”, which sets the name for the control. |
| • |
size=”25″, which sets the size of the box. In this case the size is (approximately) the width of the text box, in characters. |
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:
Name<br> <input type=”text” name=”UserName” size=”25″ style=”background-color:yellow”><p>
Most likely you’ve already identified that important exception. If you haven’t, we’ll give you a hint; it’s the style parameter:
style=”background-color:yellow”
That’s how we made our text box a nice, bright yellow: we added the style parameter, and set the value of the background-color 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:
style=”background-color:papayawhip”
|
Note. Yes, now that you mention it, Scripting Guy Dean Tsaltas was a boxer at one time in his life. But as far we know he never fought under the name Papaya Whip. |
That was easy, wasn’t 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 easy; we still have a few minutes to kill before lunch. With that in mind, let’s show you a little variation on our colored-text box code:
<SCRIPT Language=”VBScript”>
Sub SetNameColor
If Len(UserName.Value) <> 0 Then
UserName.style.background = “cyan”
Else
UserName.style.background = “yellow”
End If
End Sub
</SCRIPT>
<body>
Name<br>
<input type=”text” name=”UserName” size=”25″ style=”background-color:yellow” onChange=”SetNameColor”><p>
Address<br>
<input type=”text” name=”Address” size=”25″><p>
Phone<br>
<input type=”text” name=”Phone” size=”25″><p>
</body>
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 parameter:
onChange=”SetNameColor”
This simply tells the HTA that any time the value in the UserName text box changes (that is, any time UserName’s onChange event is fired) then the HTA should run the subroutine SetNameColor.
And what does SetNameColor do? Well, the first thing it does is use the VBScript Len function to count the number of characters in the UserName text box:
If Len(UserName.Value) <> 0 Then
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:
UserName.style.background = “cyan”
|
Note. Yes, that is correct. When changing the color of a text box programmatically you refer to the background property rather than the background-color property. |
But what if Len does 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:
UserName.style.background = “yellow
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.)
|
Note. 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’re just not sure it holds a lot of interest for the typical system administration scripter. So what does 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’ll bring you a holiday gift guide that should be a little more to your liking. 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. |
Light
Dark
0 comments