Dynamically Growing Textbox

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.