The cleanest auto resize for a textarea

The cleanest way to auto-resize a textarea while typing (like wall post on Facebook) is George Papadakis solution. It uses only standard javascript and provides eventlisteners for IE (attachEvent) and other browsers (addEventListener):

window.onload = function () {
  var t = document.getElementsByTagName('textarea')[0];
  var offset = !window.opera ? (t.offsetHeight - t.clientHeight) : (t.offsetHeight
    + parseInt(window.getComputedStyle(t, null)
      .getPropertyValue('border-top-width')));
  var resize = function (t) {
    t.style.height = 'auto';
    t.style.height = (t.scrollHeight + offset) + 'px';
  }
  t.addEventListener && t.addEventListener('input',
    function (event) {
      resize(t);
    });
  t['attachEvent'] && t.attachEvent('onkeyup',
    function () {
      resize(t);
    });
}

Other solutions are jQuery.fn.autoResize, jQuery.autogrow, elastic.

comments from wordpress

Anatoly Mironov — 2013-01-01

Thanks Martin for your response! Of course, you can use this code even if there are many texteareas. You must use an appropriate selector. The code I showed was for the demonstration only.

svasti — 2013-02-06

Not bad, but what about autoresizing for given data, i.e. a script reads different settings from a file and puts it in textareas, so that the user can edit these data. The above script autoresizes only when typing…

Anatoly Mironov — 2013-02-06

Thanks svasti! It is a good idea to make it to autoresize for given data. Unfortunately I don’t have time to experiment with it right now. I would appreciate if you leave a message when you find a solution for that.

Martin Sereday — 2013-01-01

Excellent sollution. But to use it if there are more textareas on one page?

Serma Arunachalam — 2013-06-03

Excellent solution thank u

denis — 2013-10-04

you type additional function: var txtAreaNumber = 0; function getID(thisID) { txtAreaNumber = thisID; return txtAreaNumber; } and modify: var t = document.getElementsByTagName(’textarea’)[txtAreaNumber]; html: my function isnt on win.onload but is on click! yo good bye

Anatoly Mironov — 2013-10-04

Thanks for sharing!

Stefan Froelich — 2013-10-02

This actually works. Getting rid of JQuery and needed an non jquery solution. Thanks for this.

Ashish Srivastava — 2014-05-05

Excellent.:) Thanks

Anatoly Mironov — 2014-03-04

Thanks for the feedback. Glad to hear that it worked for you.

Ignacio — 2015-09-01

Thank you it works perfectly! :D

Christofer De David — 2014-03-04

Excellent. Worked for me at 20-Mar-2014 in latest FireFox. Thank you. So nice and clean. : )

EdiSainer — 2014-10-03

I think this website filtering your html code. can you please email me your complete code or create a fiddle and share it here?

Anatoly Mironov — 2014-06-02

Thank you for sharing, Diogo!

Diogo — 2014-06-02

Nice code! Just “converted” it to jQuery, since I’m already using it in my project. Here is my result: $(function() { var t = $("#message"); t.bind(‘input’, function() { t.css(“height”, ‘auto’); t.css(“height”, t[0].scrollHeight + ‘px’); }); }); I don’t know if it will work on every browser, as I just tested it on latest version of Chrome, Firefox and Opera, all on Linux.

Diogo — 2014-06-02

Forgot to share a jsfiddle link: http://jsfiddle.net/LT7vW/

• Autoresize
• Javascript
• Textarea