By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
459,905 Members | 1,616 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 459,905 IT Pros & Developers. It's quick & easy.

Why does the size of a text input grow when using JS to create a page?

P: n/a
Hello,

I have noticed that when using JavaScript to create a page, the sizes of
the text input form elements come out bigger than the size I am trying to
set them to. I don't know if it matters, but I am using IE6...

For example: if I create a text input with a size of "1" using straight
HTML, and then type into it, I can see 2 characters at a time. But when I
use JavaScript's 'document.write()' function to create the same text input,
it is noticeably bigger and when I type into it I can see 5 characters at a
time.
Here is a short, simple example to illustrate the problem:

<HTML>
<HEAD>
<TITLE>JavaScript Test</TITLE>
<SCRIPT LANGUAGE="JavaScript">
function createPage()
{
var page='';
page+='<HTML>';
page+='<TITLE>JavaScript Test</TITLE>';
page+='<BODY>';
page+='<FORM>';
page+='Text Input (Size="1"): <INPUT TYPE="TEXT" SIZE="1">';
page+='</FORM>';
page+='</BODY>';
page+='</HTML>';
document.write(page);
document.close();
}
</SCRIPT>
</HEAD>
<BODY>
<FORM>
Text Input (Size="1"): <INPUT TYPE="TEXT" SIZE="1">
<BR><BR><BR>
<INPUT TYPE="BUTTON" VALUE="Re-render this page using JavaScript"
onClick="createPage()">
</FORM>
</BODY>
</HTML>

Am I missing something (doing something wrong)? Or is there anything that
can be done to fix this problem?

Thanks in advance,
Scott Navarre
Jul 20 '05 #1
Share this Question
Share on Google+
1 Reply


P: n/a
Scott Navarre wrote:
Hello,

I have noticed that when using JavaScript to create a page, the sizes of
the text input form elements come out bigger than the size I am trying to
set them to. I don't know if it matters, but I am using IE6...

Scott,

Try this approach:

<INPUT TYPE="BUTTON" style="width: 100px" etc>

Also, you might want to add the <head>...</head> tags, and escape the
quotes with \"

http://www.htmlgoodies.com/beyond/escapecharacter.html

e.g.

<HTML>
<HEAD>
<TITLE>JavaScript Test</TITLE>
<SCRIPT LANGUAGE="JavaScript">
function createPage() {
var page='';
page+='<HTML>\n';
page+=' <HEAD>\n';
page+=' <TITLE>JavaScript Test</TITLE>\n';
page+=' </HEAD>\n';
page+=' <BODY>\n';
page+=' <FORM>\n';
page+=' Text Input (Size=\"1\"): <INPUT TYPE=\"TEXT\"
SIZE=\"1\" style=\"width: 200\">\n';
page+=' <BR><BR><BR>\n';
page+=' <INPUT TYPE=\"BUTTON\" VALUE=\"Re-render this page
using JavaScript\" onClick=\"createPage()\">\n';
page+=' </FORM>\n';
page+=' </BODY>\n';
page+='</HTML>\n';
document.write(page);
document.close();
}
</SCRIPT>
</HEAD>
<BODY>
<FORM>
Text Input (Size="1"): <INPUT TYPE="TEXT" SIZE="1" style="width:200">
<BR><BR><BR>
<INPUT TYPE="BUTTON" VALUE="Re-render this page using JavaScript"
onClick="createPage()">
</FORM>
</BODY>
</HTML>

I think it's right, if not I'm sure someone here will catch the
mistakes, it manages to keep the text box the same width. I added the \n
to make the source on the generated page more readable.
MIke

Jul 20 '05 #2

This discussion thread is closed

Replies have been disabled for this discussion.