How Can Users Type Data Into an HTA Without Using Text Boxes?
Hey, Scripting Guy! I use HTAs as data entry forms, but I don’t really like the way the forms look when they have a bunch of text boxes on them. How can I allow my users to type data into a form without using text boxes?
— JJ
Hey, JJ. Before we begin we should, in all fairness, give you a chance to withdraw your question and submit your inquiry to another daily scripting column. Keep in mind that we’re not making this offer because we’re too lazy to answer your question (we are, but that’s another story). Instead, we’re making this offer because you’re expecting to have your question answered in a mature and responsible manner. Unfortunately, we can’t guarantee that’s what will happen.
If you don’t believe us just ask the Scripting Son. Yesterday the Scripting Son did not have to go to school until 10:00 AM. “Hey, Scripting Dad!” he said to his father early that morning. “Could you call me from work around 9:00 and wake me up?” The Scripting Dad, after grumbling some fatherly advice about the Scripting Son learning responsibility and getting himself up, said yes, he would call at 9:00 AM.
About 10:15 the phone rang in the office of the Scripting Guy who writes this column. “Uh, hey, Dad,” said a disgruntled voice on the other end. “Thanks for waking me up this morning.”
Oops. Shortly after lecturing the Scripting Son on the importance of responsibility the Scripting Dad totally neglected his responsibility and forgot all about making the promised phone call.
Fortunately the Scripting Son only missed history class. Imagine if he’d missed something important, like baseball practice!
In other words, JJ, if you’d prefer to take your scripting questions elsewhere, well, we can’t say that we blame you. However, if you’re willing to place your trust in the Scripting Guy who writes this column, then here’s a simple little HTA that doesn’t include any text boxes yet still allows users to type in data:
<body>
<b>Please enter some data in the space below:</b>
<div id=divWriter1 CONTENTEDITABLE></div><p>
<b>Please enter more data in the space below:</b>
<div id=divWriter2 CONTENTEDITABLE></div><p>
</body>
Can we take a moment to explain how this HTA works? You bet we can.
So who do you think will win the World Series this year? The Phillies seem to be the “in” pick this season, but we’re not convinced; after all, they have a history of underachieving, and – what’s that? Explain how the HTA works? What are you talking a– oh, right. Sorry; we forgot all about that.
Sure, we can explain how this HTA works; after all, we Scripting Guys take our responsibilities very seriously. As you can see, there’s not much to our HTA; to begin with, we simply have a label (in boldface) that asks the user to enter data in the space below. And then we have this HTML construction:
<div id=divWriter1 CONTENTEDITABLE></div><p>
In the typical HTA this is where we would insert a text box. However, JJ doesn’t want to use a text box here. Therefore, we’ve inserted a <DIV> tag instead. A DIV is nothing more than a named portion of an HTA or HTML page; in this case, we’ve named our DIV divWriter1. DIVs are often used as a container for dynamic updates; for example, a script that periodically goes out and retrieves information about the processes running on a computer might write that information to a DIV. That enables you to periodically display up-to-the-minute process information without having to overwrite (and then recreate) the rest of your HTA.
But we’re doing something a little different here. Notice that we added a parameter to our DIV: CONTENTEDITABLE. What does this parameter do? You got it: it makes the DIV editable, meaning that you can type text into that space, and thus into your HTA, despite the fact that there’s no text box anywhere in sight. Pretty cool, huh?
Well, we thought it was pretty cool.
Let’s take a look at the finished product, which features a pair of DIVs, each with the CONTENTEDITABLE attribute enabled:
OK, admittedly it doesn’t look like much. But notice what happens when we click in the blank spaces below each label and start typing:
See? There’s no text box, but we can still type in data. If we wanted to, we could even select the data and make it boldfaced, italic, or underlined (for example, select a word and then press Ctrl+B). In fact, if you wanted to you could create a nifty little editor, with controls that allowed you to change the font or the paragraph alignment or pretty much anything you wanted. But that goes a bit beyond what we’re able to cover in this column. For now we’re just happy that we can type text into the HTA without using a series of text boxes.
Of course, you can easily “style” your DIV any way you want. You say you want red text? This tag should do the trick:
<div id=divwriter1 CONTENTEDITABLE style=”color:red”></div><p>
And here’s a tag that sets the background color of the DIV to something other than white:
<div id=divwriter1 CONTENTEDITABLE style=”background-color:navajowhite”></div><p>
Etc. etc.
You know, that’s a very good question: how do you retrieve the information typed into a DIV? As it turns out that’s pretty easy: all you have to do is examine the value of the DIV’s innerText property. Here’s a sample subroutine that displays the information typed into divWriter1:
<Script Language=”VBScript”>
Sub TextRetriever
Msgbox divwriter1.innerText
End Sub
</Script>
Like we said, etc., etc.
That should get you started, JJ. As for the Scripting Son, he eventually made it to school, albeit a bit late. But, then again, that’s really his fault. After all, if he’s silly enough to rely on the Scripting Dad to be the mature, responsible one in the family, well, then he deserves everything that happens to him. After 17 years, you’d think he’d know better.
Light
Dark
0 comments