Textarea to resize based on content length

javascript

Solution

You can check the content's height by setting to `1px` and then reading the `scrollHeight` property:

function textAreaAdjust(element) {
  element.style.height = "1px";
  element.style.height = (25+element.scrollHeight)+"px";
}

<textarea onkeyup="textAreaAdjust(this)" style="overflow:hidden"></textarea>

It works under Firefox 3, IE 7, Safari, Opera and Chrome.

Problem

I need a textarea where I type my text in the box, it grows in length as needed to avoid having to deal with scroll bars and it need to shrink after delete text! I didn’t want to go down the mootools or jquery route because I have a lightweight form.

Original source

Related problems