Edited at

textareaを改行に応じて自動で高さが変わるようにする方法

More than 1 year has passed since last update.

入力イベント時に、テキストエリア内の文字の行高さ×改行文字数で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/