Click here to Skip to main content
65,938 articles
CodeProject is changing. Read more.
Articles / web / HTML

Dynamically Growing Textbox

5.00/5 (1 vote)
11 Mar 2013CPOL 10.5K  
Increase text box length as you type

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

JavaScript
<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.

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)