入力に合わせてテキストエリアの高さをもごもごする

改行文字が入力されたら、とかはあったんだけど、単純に文字の折り返しでも高さを調節して欲しい。
ので、書いた。

function textareaResize(event) {
    var target = event.target;
    var targetPadding = 0;
    targetPadding += parseInt(document.defaultView.getComputedStyle(target, null).paddingTop, 10);
    targetPadding += parseInt(document.defaultView.getComputedStyle(target, null).paddingBottom, 10);
    if( target.scrollHeight > target.offsetHeight ){
        target.style.height = (target.scrollHeight + targetPadding) +'px';
    }
}

これを外部ファイルにするなり、何処かに記述するなりして、

<textarea cols="30" rows="3" placeholder="なにかかく" onkeyup="textareaResize(event)"></textarea>

もごもごしたいテキストエリアをこう。

textareaにbox-sizing: border-box;を使っている前提なので、上下のpaddingを取得してくっつけてあげないと妙なスクロールが出たりする。
CSSでtransition を付けてあげると、ぬるっと大きさが変わってちょっと気持ちいい。

単純に、テキストエリアの表示の高さと中身の高さを比べて、中身のが大きければ表示の高さを中身に合わせるだけ。
paddingの取得部分、element.styleはインラインのスタイルしか取れないので、読み取り専用のgetComputedStyleを使う。
（古いIEだと対応してないみたい）
getComputedStyleについて詳しくはこちら

d.hatena.ne.jp

動作サンプル