text area expand as someone types in it

Question

I would like to make a text area that expands as the user reaches the bottom (expands downwards not outwards)

A good example of this is seen on Facebook where as the user types the text box adjusts its size accordingly.

I've tried looking online but nothing has worked so please forgive me if this may seem trivial.

<textarea name="messagea" id="styled"></textarea>
<script>
$(function() {
   $('styled').autogrow();
});
</script>

score 2 · Answer 1 · answered May 27 '12 at 19:01

With raw JavaScript, it would be something like the following.

var foo = document.getElementById('mytextarea');
foo.addEventListener('keypress', function(){
  if (this.clientHeight < this.scrollHeight) this.style.height = ''.concat(this.scrollHeight * 1.05, 'px');
});

This would not be guaranteed to work cross-browser, so you'd have to expand it for that (for IE), but this should give you a basic idea of handling the keypress event and checking the height appropriately.

text area expand as someone types in it

1 Answers1