How to automatically increase the width of a textarea while text is typed?

Question

I am trying to build a textarea whose width will dynamically increase while inserting text.

I have found many scripts that would dynamically resize a textarea by changing it's height but nothing that meets my needs.

So do you know anything that could help ?

Answer 1

this may help..

<textarea id="tarea" onkeypress="change()" style="width:200;"> </textarea>


<script type="text/javascript"> 
function change() {
    var a = document.getElementById('tarea');
    var len = a.value.length;
    a.style.width = 200 + len;
    alert(a.style.width);
}
</script>

have a good day..

Answer 2

Give the textarea an ID. If the font inside the textarea is monospace is simple. If not is a bit complicated (create a distribution function of the width of a character, get an average use it forward).

On a onkeyup or onkeypressed event use something like

if (document.getElementById('yourid').value.lenght>defaultValue)
{
    defaultValue = defaultValue+charWidth;
    document.getElementById('yourid').width = (defaultValue+charWidth)+'px';       
}