I am using the accepted answer to this question to build a textarea that expands vertically as text overflows:
My response is based on the fiddle in the accepted answer for: height of textarea increases when value increased but does not reduce when value is decreased.
This works on page load and when the text is altered in any way (cut, paste, typing, etc.)
$('textarea').on('keyup keydown', function () {
var $this = $(this);
var initialHeight = $this.height();
$this
.height(initialHeight - 40)
.height($this[0].scrollHeight + 20);}).trigger('keyup');
The reason I grab the initial height is so that the textarea doesn't have to jump to 1 or any other static number to trigger a value for scrollHeight. (it's my understanding that is what causes the screen to change scrolling because the textbox is set to that static height (usually 1) and then expands) The reason that I add 20 to scrollHeight is because sometimes scrollHeight is off by 1 or 2px and the text looks bunched up at the bottom. So to give it more space I personally add 20.