Question

I have a textarea on a form that is populated with text from a database query ready for someone to edit.

I would like the textarea to show the whole content without the need to scroll, but don’t want to put a large textarea when there is only a small amount of text.

Text can be from 5 to 300 characters.

I have seen a solution to this type of issue but only where the textarea grows onkeyup as shown below.

<script>
function textAreaAdjust(o) {
o.style.height = "1px";
o.style.height = (25+o.scrollHeight)+"px";
}
</script>
<textarea onkeyup="textAreaAdjust(this)" style="overflow:hidden"></textarea>

Answer 1

Firstly, don’t use onkeyup. It’s not suitable for detecting text input.

I use the following code to resize a textarea to constantly resize a textarea element to fit the content:

var tarea = document.getElementsByTagName("textarea")[0];

tarea.oninput = function () {
    tarea.style.height = tarea.scrollHeight + "px";
}
​

However, oninput isn’t supported in older versions of IE, so you’ll need to add onpropertychange if you need it to work in IE 8 and lower:

var tarea = document.getElementsByTagName("textarea")[0];

tarea.oninput = tarea.onpropertychange = function (evt) {
    evt = evt || window.evt;
    if (evt.type == "propertychange" && evt.propertyName != "value")
        return;

    tarea.style.height = tarea.scrollHeight + "px";
}

Working Demo: http://jsfiddle.net/D5e8t/