CODEWITHSUNDEEP
javascripthtmlcss
John Jacquay
John Jacquay

Reputation: 243

Resize input text field as text is entered

Is it possible to resize a text input box as text is typed? I've searched the web and haven't found anything.

Upvotes: 4

Views: 5208

Answers (3)

Tan
Tan

Reputation: 788

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

Upvotes: 1

Derek 朕會功夫
Derek 朕會功夫

Reputation: 94299

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.

Upvotes: 9

mrk
mrk

Reputation: 5117

Pretty simple but weird implementation :)

<script>
function enlarge(ele)
{
   ele.size += 10;
}
</script>

<form>
<input onkeypress="enlarge(this)" size="10"/>
</form>

Upvotes: 2

Related Questions