入力イベント時に、テキストエリア内の文字の行高さ×改行文字数でheightを変えてやることで実装できます。
高さの最大限を指定したい場合は単純にmaxHeightを指定すればOKです。
サンプルコード
<textarea id="textarea" placeholder="改行で高さが変わる"></textarea>
#textarea {
width: 200px;
max-height: 200px;
padding: 8px;
line-height: 20px;
}
$(function() {
var $textarea = $('#textarea');
var lineHeight = parseInt($textarea.css('lineHeight'));
$textarea.on('input', function(e) {
var lines = ($(this).val() + '\n').match(/\n/g).length;
$(this).height(lineHeight * lines);
});
});
動作デモ(jsfiddle)
こちらからご覧ください
https://jsfiddle.net/maiko_ampersand/8asbLrn9/