Hey, Scripting Guy! We have an HTA used for data entry. Included in that HTA is a text area where people can enter a maximum of 256 characters. I need to do two things: 1) limit the number of characters people can enter in the field to 256 (I can’t for the life of me figure out how to do that); and, 2) as people type, show them the number of characters remaining in the field. How can I write a script that accomplishes both of those tasks?
— RB
Hey, RB. You know, it’s always fun to travel (especially when the company you work for pays for it). And there’s no doubt that the Scripting Guys had a great time at the TechEd IT Forum conference in Barcelona; in fact, we’d like to thank everyone who stopped by our booth to pick up a Fun Book, take a crack at winning a Dr. Scripto Bobblehead, and just chat for awhile about system administration scripting. Of course, now it’s time to return to reality, and the Scripting Guy who writes this column got hit with a cold dose of reality first thing this morning.
How? Well, he’d been asked by his manager to check out a couple of groups on Facebook; in order to do so, he had to create his own Facebook account and profile. And look at the very first message he got after creating that profile:
Not that this isn’t true, mind you. But do they have to rub it in like that?!?
|
Note. So how did they know that the Scripting Guy who writes this column has no friends at Microsoft? Good question, although the Scripting Editor insists that that’s something everyone knows. |
Anyway, the Scripting Guy who writes this column has decided he needs to do something about this; after all, everyone needs friends, right? With that in mind, he ran down to the local bookstore and bought a copy of every self-help book he could find. And all the books seemed to agree on one thing: the best way to win friends and influence people is to write an HTA that not only limits the number of characters that can be typed into a textarea, but that also tells people how many more characters can be typed into that field.
Well, here goes nothing:
<HTML>
<HEAD>
<title>Character Counter</title>
</HEAD>
<SCRIPT Language=”VBScript”>
Sub CharactersRemaining
intCharacters=Len(BasicTextArea.Value)
If intCharacters > 256 Then
BasicTextArea.Value = Left(BasicTextArea.Value, 256)
Else
intRemaining = 256 – intCharacters
DataArea.InnerHTML= “Characters remaining: ” &intRemaining
End If
End Sub
</SCRIPT>
<BODY>
<textarea name=”BasicTextArea” rows=”5″ cols=”75″ onKeyPress=”CharactersRemaining”></textarea><br>
<span id=DataArea>Characters remaining: 256</span>
</BODY>
</HTML>
OK, just between friends (hint, hint), let’s see if we can figure out how this all works. As you can see, we have a very simple HTA, one in which the body consists of just two elements: a textarea (named BasicTextArea) and a span (with the ID DataArea). The tag for the textarea includes four parameters:
| • |
Name. Needless to say, this is parameter is used to name the textarea. And, yes, we do need to give the textarea a name. Otherwise we can’t refer to it programmatically. (Or at least not very easily.) |
| • |
Rows. Here we specify the height (in rows) for the text area. We arbitrarily chose 5 as the number of rows to display; you can change this to any value you want. (If you choose a low number, like 2, the textarea will automatically include scrollbars that allow you to scroll up and down within the field.) |
| • |
Cols. This is the width of the text area. Technically, this is the width in columns (Cols), but you can roughly figure it as being the number of characters displayed in each row. |
| • |
onKeyPress. Last, but definitely not least, we have the onKeyPress event. This event is fired any time the textarea has the focus and the user presses a key on the keyboard. What’s going to happen any time the user presses a key on the keyboard and this event gets fired? That’s easy: we’re going to call a subroutine named CharactersRemaining. And what will that subroutine do? That’s easy, too. But it’s also something we’ll discuss in a second. |
Before we talk about the subroutine, we need to point out that the tag for the span includes a single parameter: ID. Again, we need to specify the ID so we can manage the span programmatically. And why would we even want to manage a span programmatically? Well, one thing we need to do is provide the user with a visual indicator as to how many more characters he or she can type into the textarea. We don’t want to do that with a message box; imagine having to respond to a message box any time you pressed a key on the keyboard.
|
Note. Yes, we did have a joke prepared as a follow-up for that statement, but we thought the better of it. But that’s a punch line you can probably figure out for yourself |
Instead if a never-ending series of message boxes, we’re going to update the span (a named area in our HTA) each time a key gets pressed. When the HTA starts up the span currently contains this text:
Characters remaining: 256
We do that for one simple reason: with an empty textarea we can still type as many as 256 characters into the field. Each time we type a character we’ll then update the span’s InnerHTML property. Type one character into the field and the span will display this message:
Characters remaining: 255
Type a second character into the field and the span will display this message:
Characters remaining: 254
Type a third character into the field and – well, you get the idea.
After defining the parameters for the span, we – what’s that? You say we left something out? You say we forgot to add a parameter that limits the number of characters that can be typed into the textarea? You say you want to know what’s the point of showing people the number of characters remaining if we then turn around and allow them to type as many characters into the textarea as they want to?
Oh, come on: do you really think the Scripting Guys would omit such an important detail as that? (Um, don’t bother answering; that was just a rhetorical question.) As it turns out, there’s a good reason why we didn’t include a parameter that limits the number of characters that can be typed into the textarea: the textarea control doesn’t actually have such a parameter. In HTML the plain old textbox has a property named maxLength, a property that enables you to specify the maximum number of characters that can be entered. For better or worse, however, the textarea has no similar property.
But don’t despair; we’ll show you a way to work around that problem. Hey, have the Scripting Guys ever let you down before?
Um, that was another one of those rhetorical questions that you aren’t supposed to answer.
OK, now we can talk about the subroutine CharactersRemaining. What do we do inside this subroutine? Well, each time the textarea has the focus, and each time the user presses a key on the keyboard, the first thing we do is this:
intCharacters=Len(BasicTextArea.Value)
There’s nothing fancy about that line of code; we’re simply using the Len function to count the number of characters that have currently been typed into the textarea (BasicTextArea.Value). As you know, there are two reasons why we need to know the number of characters currently in the textarea: we need to limit the total number to a maximum of 256, and we need to show how many characters can still be typed in the field (by subtracting the number currently in the field from 256).
Let’s start by seeing how we can limit the number of characters in the field to 256. To begin with, that’s an easy thing to test for; this line of code lets us determine if the maximum number of characters in the field is greater than 256:
If intCharacters > 256 Then
Ah, another good question: how could the number of characters exceed 256? Well, suppose we already have 256 characters in the field. The minute we press a key on the keyboard, that character becomes characters number 257. And, of course, the minute we press that key we also trigger our subroutine.
So how do we prevent that 257th character from actually getting typed into the textarea? Well, to be honest, we don’t; instead, we sort of cheat a little. As it turns out, we go ahead and let the key get pressed (after all, there’s no way we can stop a user from typing on the keyboard) but once the key has been pressed we use this line of code (and the Left function) to grab the first 256 characters in the textarea and reassign just those 256 characters to the Value of the textarea:
BasicTextArea.Value = Left(BasicTextArea.Value, 256)
See how that works? For a split second there might be 257 characters in the text box, but we quickly strip off that last character and just displays characters 1 through 256. Admittedly, this might be cheating (in a way), but it works. (Give it a try and you’ll see for yourself.)
And what if we don’t have more than 256 characters in the textarea; for example, what if the character we just typed is the 14th character in the field? In that case, we run these two lines of code:
intRemaining = 256 – intCharacters DataArea.InnerHTML= “Characters remaining: ” &intRemaining
In line 1 we’re simply doing a little math: we’re subtracting the current number of characters (in this example, 14) from 256, storing the result in a variable named intRemaining. We then set the value of the span’s InnerHTML property to the string Characters remaining: followed by the value of intRemaining. In other words, to:
Characters remaining: 242
And that’s all we have to do. Each time we type a new character we call our subroutine, and each time the subroutine runs it updates the span (and, of course, the message regarding the number of characters remaining).
We hope that helps, RB, and we hope this makes the Scripting Guy who writes this column seem a little friendlier and a little easier to like. In fact, why don’t we check the Friend-o-meter and see if it did help any:
Well, we’ll keep working on it. Rome wasn’t built in a day, you know.
0 comments