Resize text input field when entering text

Question

Is it possible to change the size of an input text field when entering text? I searched the Internet and found nothing.

Answer 1

I just made one for you, try here: http://jsfiddle.net/FNMSP/2/

function autoResize(e){ var ele=e.target; //get the text field var t=ele.scrollTop; //use scroll top to determine if ele.scrollTop=0 //space is enough if(t>0){ //If it needs more space.... ele.style.height=(ele.offsetHeight+t+t)+"px"; //Then add space for it! } } 

You can do this in the text box,

 <textarea onkeydown="autoResize(event)">Auto Resize!</textarea> 

Or use below to attach a function to each <textarea> :

 var ele=document.getElementsByTagName("textarea"); for(i=0;i<ele;i++){ ele[i].addEventListener("keydown",autoResize,false) } 

Feel free to use it.

Answer 2

Pretty simple but weird implementation :)

 <script> function enlarge(ele) { ele.size += 10; } </script> <form> <input onkeypress="enlarge(this)" size="10"/> </form> 

Answer 3

 <SCRIPT LANGUAGE="JavaScript" type="text/javascript"> function call_me(max_length) { if((document.form1.mybox.value == null ) || (document.form1.mybox.value == "" )) document.form1.mybox.size = size; if((document.form1.mybox.value.length >= size) && (document.form1.mybox.value.length <= max_length)) document.form1.mybox.size = document.form1.mybox.value.length + 1; else document.form1.mybox.size = size; } </script> LastName: <input type="text" style="font-family: Terminal" name="mybox" maxlength="30" size="10" onFocus="setInterval('call_me(document.form1.mybox.maxLength)', 1)"> <SCRIPT LANGUAGE="JavaScript"> var size = document.form1.mybox.size; </script>