{"id":65263,"date":"2007-03-22T02:46:00","date_gmt":"2007-03-22T02:46:00","guid":{"rendered":"https:\/\/blogs.technet.microsoft.com\/heyscriptingguy\/2007\/03\/22\/how-can-users-type-data-into-an-hta-without-using-text-boxes\/"},"modified":"2007-03-22T02:46:00","modified_gmt":"2007-03-22T02:46:00","slug":"how-can-users-type-data-into-an-hta-without-using-text-boxes","status":"publish","type":"post","link":"https:\/\/devblogs.microsoft.com\/scripting\/how-can-users-type-data-into-an-hta-without-using-text-boxes\/","title":{"rendered":"How Can Users Type Data Into an HTA Without Using Text Boxes?"},"content":{"rendered":"<p><H2><IMG class=\"nearGraphic\" title=\"Hey, Scripting Guy! Question\" height=\"34\" alt=\"Hey, Scripting Guy! Question\" src=\"https:\/\/devblogs.microsoft.com\/wp-content\/uploads\/sites\/29\/2019\/02\/q-for-powertip.jpg\" width=\"34\" align=\"left\" border=\"0\"> <\/H2>\n<P>Hey, Scripting Guy! I use HTAs as data entry forms, but I don\u2019t 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?<BR><BR>&#8212; JJ<\/P><IMG height=\"5\" alt=\"Spacer\" src=\"https:\/\/devblogs.microsoft.com\/scripting\/wp-content\/uploads\/sites\/29\/2019\/05\/spacer.gif\" width=\"5\" border=\"0\"><IMG class=\"nearGraphic\" title=\"Hey, Scripting Guy! Answer\" height=\"34\" alt=\"Hey, Scripting Guy! Answer\" src=\"https:\/\/devblogs.microsoft.com\/wp-content\/uploads\/sites\/29\/2019\/02\/a-for-powertip.jpg\" width=\"34\" align=\"left\" border=\"0\"><A href=\"http:\/\/go.microsoft.com\/fwlink\/?linkid=68779&amp;clcid=0x409\"><IMG class=\"farGraphic\" title=\"Script Center\" height=\"288\" alt=\"Script Center\" src=\"http:\/\/img.microsoft.com\/library\/media\/1033\/technet\/images\/scriptcenter\/ad.jpg\" width=\"120\" align=\"right\" border=\"0\"><\/A> \n<P>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\u2019re not making this offer because we\u2019re too lazy to answer your question (we are, but that\u2019s another story). Instead, we\u2019re making this offer because you\u2019re expecting to have your question answered in a mature and responsible manner. Unfortunately, we can\u2019t guarantee that\u2019s what will happen.<\/P>\n<P>If you don\u2019t believe us just ask the Scripting Son. Yesterday the Scripting Son did not have to go to school until 10:00 AM. \u201cHey, Scripting Dad!\u201d he said to his father early that morning. \u201cCould you call me from work around 9:00 and wake me up?\u201d The Scripting Dad, after grumbling some fatherly advice about the Scripting Son learning responsibility and getting <I>himself<\/I> up, said yes, he would call at 9:00 AM.<\/P>\n<P>About 10:15 the phone rang in the office of the Scripting Guy who writes this column. \u201cUh, hey, <I>Dad<\/I>,\u201d said a disgruntled voice on the other end. \u201cThanks for waking me up this morning.\u201d <\/P>\n<P>Oops. Shortly after lecturing the Scripting Son on the importance of responsibility the Scripting Dad totally neglected <I>his<\/I> responsibility and forgot all about making the promised phone call.<\/P>\n<P>Fortunately the Scripting Son only missed history class. Imagine if he\u2019d missed something important, like baseball practice!<\/P>\n<P>In other words, JJ, if you\u2019d prefer to take your scripting questions elsewhere, well, we can\u2019t say that we blame you. However, if you\u2019re willing to place your trust in the Scripting Guy who writes this column, then here\u2019s a simple little HTA that doesn\u2019t include any text boxes yet still allows users to type in data:<\/P><PRE class=\"codeSample\">&lt;body&gt;\n    &lt;b&gt;Please enter some data in the space below:&lt;\/b&gt;  \n    &lt;div id=divWriter1 CONTENTEDITABLE&gt;&lt;\/div&gt;&lt;p&gt;\n    &lt;b&gt;Please enter more data in the space below:&lt;\/b&gt;  \n    &lt;div id=divWriter2 CONTENTEDITABLE&gt;&lt;\/div&gt;&lt;p&gt;\n&lt;\/body&gt;\n<\/PRE>\n<P>Can we take a moment to explain how this HTA works? You bet we can.<\/P>\n<P>So who do you think <I>will<\/I> win the World Series this year? The Phillies seem to be the \u201cin\u201d pick this season, but we\u2019re not convinced; after all, they have a history of underachieving, and \u2013 what\u2019s that? Explain how the HTA works? What are you talking a&#8211; oh, right. Sorry; we forgot all about that.<\/P>\n<P>Sure, we can explain how this HTA works; after all, we Scripting Guys take our responsibilities very seriously. As you can see, there\u2019s 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:<\/P><PRE class=\"codeSample\">&lt;div id=divWriter1 CONTENTEDITABLE&gt;&lt;\/div&gt;&lt;p&gt;\n<\/PRE>\n<P>In the typical HTA this is where we would insert a text box. However, JJ doesn\u2019t want to use a text box here. Therefore, we\u2019ve inserted a &lt;DIV&gt; tag instead. A DIV is nothing more than a named portion of an HTA or HTML page; in this case, we\u2019ve 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.<\/P>\n<P>But we\u2019re doing something a little different here. Notice that we added a parameter to our DIV: <B>CONTENTEDITABLE<\/B>. 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\u2019s no text box anywhere in sight. Pretty cool, huh?<\/P>\n<P>Well, <I>we<\/I> thought it was pretty cool.<\/P>\n<P>Let\u2019s take a look at the finished product, which features a pair of DIVs, each with the CONTENTEDITABLE attribute enabled:<\/P><IMG height=\"232\" alt=\"HTA\" src=\"http:\/\/img.microsoft.com\/library\/media\/1033\/technet\/images\/scriptcenter\/qanda\/editable1.jpg\" width=\"358\" border=\"0\"> \n<P><BR>OK, admittedly it doesn\u2019t <I>look<\/I> like much. But notice what happens when we click in the blank spaces below each label and start typing:<\/P><IMG height=\"232\" alt=\"HTA\" src=\"http:\/\/img.microsoft.com\/library\/media\/1033\/technet\/images\/scriptcenter\/qanda\/editable2.jpg\" width=\"358\" border=\"0\"> \n<P><BR>See? There\u2019s 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\u2019re able to cover in this column. For now we\u2019re just happy that we can type text into the HTA without using a series of text boxes.<\/P>\n<P>Of course, you can easily \u201cstyle\u201d your DIV any way you want. You say you want red text? This tag should do the trick:<\/P><PRE class=\"codeSample\">&lt;div id=divwriter1 CONTENTEDITABLE style=&#8221;color:red&#8221;&gt;&lt;\/div&gt;&lt;p&gt;\n<\/PRE>\n<P>And here\u2019s a tag that sets the background color of the DIV to something other than white:<\/P><PRE class=\"codeSample\">&lt;div id=divwriter1 CONTENTEDITABLE style=&#8221;background-color:navajowhite&#8221;&gt;&lt;\/div&gt;&lt;p&gt;\n<\/PRE>\n<P>Etc. etc.<\/P>\n<P>You know, that\u2019s a very good question: how <I>do<\/I> you retrieve the information typed into a DIV? As it turns out that\u2019s pretty easy: all you have to do is examine the value of the DIV\u2019s <B>innerText<\/B> property. Here\u2019s a sample subroutine that displays the information typed into divWriter1:<\/P><PRE class=\"codeSample\">&lt;Script Language=&#8221;VBScript&#8221;&gt;\n    Sub TextRetriever\n        Msgbox divwriter1.innerText\n    End Sub\n&lt;\/Script&gt;\n<\/PRE>\n<P>Like we said, etc., etc.<\/P>\n<P>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\u2019s really <I>his<\/I> fault. After all, if he\u2019s 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\u2019d think he\u2019d know better.<\/P><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Hey, Scripting Guy! I use HTAs as data entry forms, but I don\u2019t 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?&#8212; JJ Hey, JJ. Before we begin we should, in [&hellip;]<\/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-65263","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":"<p>Hey, Scripting Guy! I use HTAs as data entry forms, but I don\u2019t 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?&#8212; JJ Hey, JJ. Before we begin we should, in [&hellip;]<\/p>\n","_links":{"self":[{"href":"https:\/\/devblogs.microsoft.com\/scripting\/wp-json\/wp\/v2\/posts\/65263","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=65263"}],"version-history":[{"count":0,"href":"https:\/\/devblogs.microsoft.com\/scripting\/wp-json\/wp\/v2\/posts\/65263\/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=65263"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/scripting\/wp-json\/wp\/v2\/categories?post=65263"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/scripting\/wp-json\/wp\/v2\/tags?post=65263"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}