{"id":64903,"date":"2007-05-09T22:08:00","date_gmt":"2007-05-09T22:08:00","guid":{"rendered":"https:\/\/blogs.technet.microsoft.com\/heyscriptingguy\/2007\/05\/09\/how-can-i-prevent-users-from-typing-anything-but-numbers-into-an-hta-text-box\/"},"modified":"2007-05-09T22:08:00","modified_gmt":"2007-05-09T22:08:00","slug":"how-can-i-prevent-users-from-typing-anything-but-numbers-into-an-hta-text-box","status":"publish","type":"post","link":"https:\/\/devblogs.microsoft.com\/scripting\/how-can-i-prevent-users-from-typing-anything-but-numbers-into-an-hta-text-box\/","title":{"rendered":"How Can I Prevent Users From Typing Anything But Numbers Into an HTA Text Box?"},"content":{"rendered":"

\"Hey, \n

Hey, Scripting Guy! We have an HTA we use for data input. In one of the text boxes our users are only supposed to type numbers. How can I prevent users from typing anything except numbers in that text box?

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

Hey, KV. You know that\u2019s a pretty good question: is there a way to prevent users from typing anything except numbers into a text box? And the answer to your question is this: yes, yes there is<\/I> a way to prevent users from typing anything except numbers into a text box. Thanks for the question, KV; we\u2019ll see everyone tomorrow!<\/P>\n

Hold on a second here; the Scripting Editor seems to have a problem with today\u2019s column. (God forbid we dangled a participle or something!) What\u2019s that? No, no, if KV wanted to know how<\/I> to prevent users from typing anything except numbers into a text box then she would have asked<\/I> how to do that. <\/P>\n

Oh, she did not; go back and read the question again and see for yourself.<\/P>\n

Oh. Well, she must have added that later, because we\u2019re pretty sure that wasn\u2019t in her original question.<\/P>\n

At any rate, we\u2019re back. As we were about to say (before we were so rudely interrupted), KV wants to know how<\/I> to prevent users from typing anything except numbers into a text box. (Obviously.) How can she do that? To tell you the truth, we have no idea; heck, if we knew how to do things like that we\u2019d have real<\/I> jobs.<\/P>\n\n<\/THEAD>\n\n\n
\n

Note<\/B>. In case you\u2019ve been thinking, \u201cI bet Microsoft only allows the best and the brightest of their employees to write the Hey, Scripting Guy!<\/I> column,\u201d well, let\u2019s just say that you might want to think again.<\/P><\/TD><\/TR><\/TBODY><\/TABLE>\n

<\/DIV>\n

The truth is, KV, we don\u2019t know<\/I> how to prevent users from typing anything except numbers into a text box. But let\u2019s try a few things and see what happens. Nope \u2026 Nope \u2026 Close, but not quite \u2026 Ouch! that hurt \u2026 No \u2026 Ah, there we go: we did it!<\/P>\n

Oops. False alarm; apparently W isn\u2019t<\/I> a number. Back to the old drawing board \u2026. <\/P>\n

Hold the phone, KV; we just might have something for you after all:<\/P>

<SCRIPT Language =”VBScript”>\n    Sub KeyCheck\n        If Window.Event.KeyCode < 48 OR Window.Event.KeyCode > 57 Then \n            Window.Event.returnValue = False    \n        End If\n    End Sub\n<\/SCRIPT><\/p>\n
<BODY>\n    <INPUT TYPE=text onKeyPress=”KeyCheck”>\n<\/BODY>\n<\/PRE>\n
It took a little poking around through the HTML and DHTML Reference<\/B><\/A> on MSDN, but this looks like this will do the trick. As you can see, we have a very simple little HTA here consisting of a single text box and a single subroutine. (What\u2019s that? You don\u2019t know what HTAs even are<\/I>? Then you should take a look at our HTA Developers Zone<\/B><\/A>.) Let\u2019s start off by eyeballing the code that creates the text box:<\/P>
<INPUT TYPE=text onKeyPress=”KeyCheck”>\n<\/PRE>\n
Nothing too fancy there: we simply use the INPUT<\/B> tag to create the text box, adding the TYPE=text<\/B> parameter to ensure that we get a text box. (If you\u2019re new to HTML, the INPUT tag can also be used to add controls like buttons, checkboxes, and radio buttons to an HTA.) We then tack this parameter on to the end of the INPUT tag:<\/P>
onKeyPress=”KeyCheck”\n<\/PRE>\n
What does this do? Well, any time a user presses a key while working in an HTA (or on a Web page, for that matter), the onKeyPress<\/B> event is fired. This parameter simply says, \u201cOK, HTA; here\u2019s the deal. If the onKeyPress event gets fired and<\/I> if the focus happens to be in our text box, then run the subroutine named KeyCheck.\u201d In other words, if you\u2019re typing something in the text box, each time you press a key the HTA will call the KeyCheck subroutine.<\/P>\n
So then what does the KeyCheck subroutine do? Well, as you probably know, each key on the keyboard has a value assigned to it. (You can also find a list of keys \u2013 and their corresponding values<\/B><\/A> \u2013 on MSDN.) The first thing we do in this subroutine is check to see if the KeyCode<\/B> (which happens to be a property of the onKeyPress event) is less than 48 or greater than 57:<\/P>
If Window.Event.KeyCode < 48 OR Window.Event.KeyCode > 57 Then\n<\/PRE>\n
Why would we do a crazy thing like that? To answer that, take a look at the values assigned to keyboard keys 0 through 9:<\/P>\n\n<\/THEAD>\n\n\n\n\n\n\n\n\n\n\n\n\n
\n
Key<\/B><\/P><\/TD>\n
\n
Value<\/B><\/P><\/TD><\/TR>\n
\n
0<\/P><\/TD>\n
\n
48<\/P><\/TD><\/TR>\n
\n
1<\/P><\/TD>\n
\n
49<\/P><\/TD><\/TR>\n
\n
2<\/P><\/TD>\n
\n
50<\/P><\/TD><\/TR>\n
\n
3<\/P><\/TD>\n
\n
51<\/P><\/TD><\/TR>\n
\n
4<\/P><\/TD>\n
\n
52<\/P><\/TD><\/TR>\n
\n
5<\/P><\/TD>\n
\n
53<\/P><\/TD><\/TR>\n
\n
6<\/P><\/TD>\n
\n
54<\/P><\/TD><\/TR>\n
\n
7<\/P><\/TD>\n
\n
55<\/P><\/TD><\/TR>\n
\n
8<\/P><\/TD>\n
\n
56<\/P><\/TD><\/TR>\n
\n
9<\/P><\/TD>\n
\n
57<\/P><\/TD><\/TR><\/TBODY><\/TABLE>\n
<\/DIV>\n
In other words, if a key has a value of 48 through 57, then it has to be one of the numbers 0 through 9. By extension, that means that any key with a value less than 48, or any key with a value greater than 57, can\u2019t<\/I> be one of the numbers 0 through 9. By checking the value of the KeyCode property we can determine which key the user typed.<\/P>\n
Now, if the user types a number between 0 and 9 that\u2019s fine; in that case we don\u2019t do anything except exit the subroutine. However, let\u2019s assume the user has pressed a key that isn\u2019t<\/I> one of the numbers 0 through 9. For example, suppose the user types x<\/I>, which has a value of 120. What happens then?<\/P>\n
This is what happens then:<\/P>
Window.Event.returnValue = False\n<\/PRE>\n
Interestingly enough, events have all sorts of properties associated with them, including returnValue<\/B>. What does the returnValue property do? Well, when set to True (the default value) it returns the value of the event; in this case, that means it will return the fact that the user pressed a key on the keyboard. However, if returnValue is set to False then the event value is not<\/I> returned; in a sense, it\u2019s as though the event never occurred. If a user presses any key other than one of the numbers 0 through 9, we set returnValue to False and the event value is discarded; that means that no character gets typed into the text box.<\/P>\n
Confused? Give it a try and see for yourself. If you type any of the numbers between 0 and 9 (inclusive) those values will appear in the text box. But if you type anything other than those numbers \u2026.<\/P>\n
Anyway, we hope that helps, KV. And we apologize for the confusion at the beginning of today\u2019s column; we had no idea that we were expected to explain how<\/I> to prevent users from typing anything except numbers into a text box. Fortunately, the Scripting Editor was on the ball, and thanks to her diligence we ended up doing a bunch of research and hard work that we hadn\u2019t planned on doing, and on what could end up being the only nice day we ever get here in Redmond. (As we sit here typing, it\u2019s 70 degrees and sunny.) But duty is far more important than a sunny day in May, isn\u2019t it Scripting Editor?<\/P>\n\n<\/THEAD>\n\n\n
\n
Note<\/B>. Can we tell that it\u2019s 70 degrees and sunny just by looking out our window? You bet we can. Or at least we could, if we actually had<\/I> a window. In case you\u2019re wondering, the Scripting Guy who writes this column (despite having single-handedly invented<\/I> the Script Center) doesn\u2019t have a window office. Interestingly, the Scripting Editor, whose claim to fame is that she \u2026 did \u2026 something \u2026 at some point in her life \u2026 does<\/I> have a window office. But, then again, she deserves<\/I> a window office.<\/P>\n
Come to think of it, she deserves a lot<\/I> of things. Wouldn\u2019t you agree, Scripting Editor?<\/P>\n
Ed<\/I>itor\u2019s Reply: Absolutely. Probably not anything the Scripting Guy<\/I> who writes this column<\/I> is thinking of, but yes, the Scripting <\/I>Ed<\/I>itor deserves a lot of things<\/I> \u2013 <\/I>especially her window office.<\/I><\/P><\/TD><\/TR><\/TBODY><\/TABLE><\/p>\n","protected":false},"excerpt":{"rendered":"
Hey, Scripting Guy! We have an HTA we use for data input. In one of the text boxes our users are only supposed to type numbers. How can I prevent users from typing anything except numbers in that text box?— KV Hey, KV. You know that\u2019s a pretty good question: is there a way to […]<\/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-64903","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! We have an HTA we use for data input. In one of the text boxes our users are only supposed to type numbers. How can I prevent users from typing anything except numbers in that text box?— KV Hey, KV. You know that\u2019s a pretty good question: is there a way to […]<\/p>\n","_links":{"self":[{"href":"https:\/\/devblogs.microsoft.com\/scripting\/wp-json\/wp\/v2\/posts\/64903","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=64903"}],"version-history":[{"count":0,"href":"https:\/\/devblogs.microsoft.com\/scripting\/wp-json\/wp\/v2\/posts\/64903\/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=64903"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/scripting\/wp-json\/wp\/v2\/categories?post=64903"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/scripting\/wp-json\/wp\/v2\/tags?post=64903"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}