{"id":63893,"date":"2007-10-02T05:12:00","date_gmt":"2007-10-02T05:12:00","guid":{"rendered":"https:\/\/blogs.technet.microsoft.com\/heyscriptingguy\/2007\/10\/02\/hey-scripting-guy-how-can-i-automatically-move-the-focus-as-users-type-in-an-hta\/"},"modified":"2007-10-02T05:12:00","modified_gmt":"2007-10-02T05:12:00","slug":"hey-scripting-guy-how-can-i-automatically-move-the-focus-as-users-type-in-an-hta","status":"publish","type":"post","link":"https:\/\/devblogs.microsoft.com\/scripting\/hey-scripting-guy-how-can-i-automatically-move-the-focus-as-users-type-in-an-hta\/","title":{"rendered":"Hey, Scripting Guy! How Can I Automatically Move the Focus as Users Type in an HTA?"},"content":{"rendered":"

\"Hey, <\/H2>\n

I have an HTA that we use for creating and modifying user accounts. In that HTA we have a couple of phone number fields; each of these fields consists of three text boxes (one for the area code and two for the phone number). I\u2019d like to set this up so that, as soon as someone has typed three digits into the area code box the cursor automatically jumps to the first phone number box; as soon as someone types three digits in that<\/I> text box I\u2019d like the cursor to automatically jump to the third and final text box. How can I do that?

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

Hey, TJ. Wow. Gee, that\u2019s a tough one, TJ and, to be honest, we don\u2019t see how we can answer that; in fact, we aren\u2019t even sure that there is<\/I> an answer to that question. To tell you the truth, we feel really bad about that, and we feel even worse that we won\u2019t be able to answer anyone\u2019s question today. But that\u2019s just the way it goes; we\u2019ll try again tomorrow. Sorry.<\/P>\n

And no, this has nothing<\/I> to do with the Scripting Guy who writes this column intending to sneak out early in order to catch today\u2019s tiebreaker game between the San Diego Padres and the Colorado Rockies. You say that San Diego and Colorado are playing today, with the winner moving on and the loser going home? We had no idea; in fact, we thought the baseball season ended a long time ago. How about that? We —<\/P>\n

OK, so you caught us: we are <\/I>planning on sneaking out early so that we can go home and watch the baseball game. And so we\u2019ll make a deal with you TJ: we\u2019ll show you how to automatically move the focus in an HTA and, in return, if our manager calls looking for us you tell him we\u2019re in a meeting, a meeting that will last the rest of the day. Deal? Deal.<\/P>\n

OK, here\u2019s our end of the bargain:<\/P>

<SCRIPT Language=”VBScript”>\n    Sub Window_Onload\n        TextBox1.Focus\n    End Sub<\/p>\n
    Sub TextBoxCheck\n        If Len(TextBox1.Value) = 3 Then\n            TextBox2.Focus\n            TextBox2.Select\n        End If\n    End Sub<\/p>\n
    Sub TextBoxCheck2\n        If Len(TextBox2.Value) = 3 Then\n            TextBox3.Focus\n            TextBox3.Select\n        End If\n    End Sub\n<\/SCRIPT><\/p>\n
<body>\n    <input type=”text” name=”TextBox1″ size=”10″ maxLength=”3″ onKeyUp=”TextBoxCheck”>-\n    <input type=”text” name=”TextBox2″ size=”10″ maxLength=”3″ onKeyUp=”TextBoxCheck2″>-\n    <input type=”text” name=”TextBox3″ size=”10″ maxLength=”4″>\n<\/body>\n<\/PRE>\n
Let\u2019s see if we can figure out how this baby works. (And let\u2019s see if we can do so in 15 minutes or less.) To begin with, you might have noticed that we have three text boxes in the body of our HTA. (Just to add that extra special little touch, we\u2019ve also put hyphens between each box, making the whole thing look a little more like a phone number.) Let\u2019s take a look at the HTML tagging for text box No. 1:<\/P>
<input type=”text” name=”TextBox1″ size=”10″ maxLength=”3″ onKeyUp=”TextBoxCheck”>\n<\/PRE>\n
As you can see, this is nothing more than your basic <INPUT> tag, along with the following five parameters:<\/P>\n\n\n\n\n\n\n\n
\u2022<\/TD>\n\n
type=\u201dtext\u201d<\/B>. This is just standard HTML to indicate that we want to use a text box control and not, say, a button or checkbox.<\/P><\/TD><\/TR>\n
\u2022<\/TD>\n\n
name=\u201dTextBox1\u201d<\/B>. This is the name given to our text box; each text box has to have a unique name so that we can refer to the individual control boxes. (And, yes, now that you mention it, the Scripting Guys did come up with the name \u201cTextBox1\u201d all by ourselves. How did you know?)<\/P><\/TD><\/TR>\n
\u2022<\/TD>\n\n
size=\u201d10\u201d<\/B>. The size property simply specifies the width of the text box, in characters. We picked 10 because \u2026 well, just because.<\/P><\/TD><\/TR>\n
\u2022<\/TD>\n\n
maxLength=\u201d3\u201d<\/B>. This is a very useful property to know about: maxLength specifies the maximum number of characters that can be typed into the text box. Because a U.S. area code never has more than 3 digits, we set the maxLength of the text box to 3. Once you\u2019ve entered 3 characters into the text box you can pound the keyboard all you want; you\u2019ll never be able to wedge a fourth or fifth character into the box. Never.<\/P><\/TD><\/TR>\n
\u2022<\/TD>\n\n
onKeyUp=\u201dTextBoxCheck\u201d<\/B>. The onKeyUp event is fired any time the focus is in the text box and someone presses and releases a key on the keyboard. The very moment that key is released the onKeyUp event is fired and our HTA immediately runs the subroutine TextBoxCheck (which we\u2019ll discuss in just a second).<\/P><\/TD><\/TR><\/TBODY><\/TABLE>\n
And then we have similar HTML tagging for our other two text boxes. But it is<\/I> getting late, so we\u2019ll let you figure out that part for yourself. (It\u2019ll give you something to do while we\u2019re at our, uh \u2026 meeting.)<\/P>\n
In addition to the three text boxes, our HTA also has three subroutines. The first subroutine, Window_OnLoad<\/B>, is automatically called any time the HTA is loaded or refreshed. As you can see, this subroutine does only one thing: it places the focus (the cursor) in TextBox1. Why did we do that? That\u2019s easy: for this very simple HTA, that ensures that each time you run the application the focus will be in the first text box. In turn, that means you can start the HTA and immediately begin typing the area code.<\/P>\n
This isn\u2019t something that you have<\/I> to do; we just thought it was another one of those nice little touches.<\/P>\n
Our next two subroutines (TextBoxCheck and TextBoxCheck2, two more names we Scripting Guys came up with ourselves) represent the heart and soul of our little HTA. Let\u2019s take a peek at the TextBoxCheck subroutine which, as you recall, is triggered any time a user types something in the text box set aside for the area code:<\/P>
Sub TextBoxCheck\n    If Len(TextBox1.Value) = 3 Then\n        TextBox2.Focus\n        TextBox2.Select\n    End If\nEnd Sub\n<\/PRE>\n
So what\u2019s going on here? Well, each time someone types something in the text box we use the VBScript Len<\/B> function to see how many characters, in total, have been typed into the box. (That is, how many characters are in the text box\u2019s Value<\/B>.) Suppose the length (number of characters) is 3. As it turns out, that\u2019s the maximum number of characters allowed in the text box (and, not coincidentally, in an area code). Therefore we do two things:<\/P>\n\n\n\n\n
\u2022<\/TD>\n\n
First, we move the focus from TextBoxt1 to TextBox2. That\u2019s what the code TextBox2.Focus<\/B> is for.<\/P><\/TD><\/TR>\n
\u2022<\/TD>\n\n
Second, we select any existing text in TextBox2. We don\u2019t have to do that, but that allows you to start typing and automatically replace any existing text in TextBox2. If you don\u2019t like that feature then simply remove the line TextBox2.Select<\/B>.<\/P><\/TD><\/TR><\/TBODY><\/TABLE>\n
See how that works? You type the first character in the text box and, the moment you release the key, the subroutine is executed. Inside that subroutine we check to see how many characters have been typed in the text box. So far we have just 1 character in there, so nothing happens. Type a second character in the text box and, again, nothing happens. (Why not? Because nothing is supposed<\/I> to happen, not unless there are 3 characters in the box.) Type a third<\/I> character, however, and upon releasing the key, the focus will immediately jump to TextBox2. <\/P>\n
Which is just exactly what we wanted<\/I> it to do.<\/P>\n\n<\/THEAD>\n\n\n
\n
Note<\/B>. As you probably guessed, the subroutine TextBoxCheck2 is very similar. The only differences? For one, this subroutine is fired each time something is typed into TextBox2; for another, when 3 characters have been entered into the text box the focus jumps to TextBox3.<\/P><\/TD><\/TR><\/TBODY><\/TABLE>\n
<\/DIV>\n
That should do it, TJ. You could, of course, add in even more elaborate checking, to ensure that only numbers are typed into the boxes, but that\u2019s an exercise we\u2019ll save for another day. <\/P>\n
Uh, never mind. As it turns out, the Scripting Editor doesn\u2019t like us to say that we\u2019ll save something for another day. \u201cYou say that all time,\u201d she huffed, \u201cand then half the time you never followed through.\u201d Just to make her happy (needless to say, our sole purpose in life is to make the Scripting Editor happy) we traveled back in time and wrote a Hey, Scripting Guy! column<\/B><\/A> that shows one way you can restrict the characters that can be typed into a text box.<\/P>\n
And then, just for the heck of it, we traveled forward<\/I> in time in order to see who\u2019s going to win this year\u2019s World Series. If you\u2019re a Boston fan, well, you might want to limit the amount you bet on your beloved Red Sox. Just a little money-saving advice from the Scripting Guys.<\/P>\n
Oh, and in case you\u2019re wondering, the Scripting Guy who writes this column is predicting that the Cleveland Indians will win this year\u2019s World Series. And you\u2019re right: Cleveland is definitely not<\/I> the favorite, and the Scripting Guy who writes this column is risking public ridicule by making such a prediction. But that\u2019s OK; after all, if he\u2019s wrong he\u2019ll just travel back in time and rewrite his prediction, inserting the name of the team that really will<\/I> win the World Series this year.<\/P>\n
But there\u2019s no time for time-travel now; instead, the Scripting Guy who writes this column is off to a meeting. (Remember, a deal\u2019s a deal.) See you tomorrow.<\/P><\/p>\n","protected":false},"excerpt":{"rendered":"
I have an HTA that we use for creating and modifying user accounts. In that HTA we have a couple of phone number fields; each of these fields consists of three text boxes (one for the area code and two for the phone number). I\u2019d like to set this up so that, as soon as […]<\/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-63893","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":"
I have an HTA that we use for creating and modifying user accounts. In that HTA we have a couple of phone number fields; each of these fields consists of three text boxes (one for the area code and two for the phone number). I\u2019d like to set this up so that, as soon as […]<\/p>\n","_links":{"self":[{"href":"https:\/\/devblogs.microsoft.com\/scripting\/wp-json\/wp\/v2\/posts\/63893","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=63893"}],"version-history":[{"count":0,"href":"https:\/\/devblogs.microsoft.com\/scripting\/wp-json\/wp\/v2\/posts\/63893\/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=63893"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/scripting\/wp-json\/wp\/v2\/categories?post=63893"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/scripting\/wp-json\/wp\/v2\/tags?post=63893"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}