• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 1445
  • Last Modified:

How to resize a textbox on the fly.

I have an input type=text  readonly.  I want this textbox to be able to resize based on the length of the input that will populate it.  How can I do this??  I am using HTML and javascript.
1 Solution
In a web page there is no good way to really pin down the size of text ... but you could make your best stab at it by checking the length of the value of the textbox and hopefully knowing the font family and font size you can make a decent attempt to size the textbox's width.

var txtBox = document.getElementById("myTextBox");
var length = txtBox.value.length;
txtBox.style.width = (length * 5) + "px";

try adjusting the 5 to whatever seems to work best ...
You can use this script for what you're looking for.  They have several examples to show you what it does.  The difference for you would be that the text box would be disabled and the size would default to the length of the text.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Cloud Class® Course: Microsoft Office 2010

This course will introduce you to the interfaces and features of Microsoft Office 2010 Word, Excel, PowerPoint, Outlook, and Access. You will learn about the features that are shared between all products in the Office suite, as well as the new features that are product specific.

Tackle projects and never again get stuck behind a technical roadblock.
Join Now