Introduction
This tip is to dynamically change the width of the textbox as you type. This might be useful when you have to display the entire content of the textbox without requiring the user to scroll. In my case, it was checking the answers for a question with text below the user input answer.
Using the Code
<input type="text"
onkeyup="if(this.scrollWidth > this.clientWidth)this.style.width=this.scrollWidth+'px';">
For a one time usage, the if
statement in onkeyup
event is okay. A better solution is to define a function taking a parameter and call it in the onkeyup
event passing this
as the parameter.
To grow it in height (in general, for the right control in the right context), assuming it is a multiline textbox, scrollHeight
and clientHeight
are used.