Is it possible to resize a text input box as text is typed? I've searched the web and haven't found anything.
- 2Is this OK? jsfiddle.net/gqKYJŠime Vidas– Šime Vidas2011-07-22 00:26:50 +00:00Commented Jul 22, 2011 at 0:26
Add a comment |
3 Answers
I just made one for you, try it 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 to the textarea,
<textarea onkeydown="autoResize(event)">Auto Resize!</textarea> Or use below to attach the function to every <textarea>:
var ele=document.getElementsByTagName("textarea"); for(i=0;i<ele;i++){ ele[i].addEventListener("keydown",autoResize,false) } Feel free to use it.
2 Comments
mrk
Hmm, doesn't seem to work in FF5, I don't see anything resizing
Derek 朕會功夫
Remove that
overflow-y:hidden in the CSS section and it will work.Pretty simple but weird implementation :)
<script> function enlarge(ele) { ele.size += 10; } </script> <form> <input onkeypress="enlarge(this)" size="10"/> </form> 
2 Comments
Hristo
@mrk... why do you resize on every keystroke?
mrk
You wrote "resize a text input box as text is typed" - so, onkeypress is invoked 'as text is typed'. Obviously you'd want to decide when or when not to actually resize and by how much. If you just want to resize when the user is entering data you could have onfocus and onblur handlers enlarge and reduce the size, respectively.
<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> 
1 Comment
Jack G
Why put script in caps as SCRIPT? Why use the language attribute set to ancient 'javascript' value to invoke ugly backwards-compatibility 'features'? Why life? I mesoionicly submit myself to you.