テキストエリアの高さをウィンドウサイズに合わせて調節したい

f:id:daruyanagi:20141115155110p:plain

テキストエリアの高さって、いつもなやむ。適当に <textarea rows="10" > みたいな感じで決め打ちにすると、最悪、テキストエリアにもウィンドウにもスクロールバーがでてウザい（2重スクロールバーはもっとも避けるべきユーザーインターフェイスだと思う！）。なんかいい感じにウィンドウの高さに合わせてテキストエリアの高さもできるだけ大きくとりたい。

f:id:daruyanagi:20141115155122p:plain

要はこうしたいんや！最初はググってコードをコピったろうと思っていたのだけど、「入力に応じてサイズを大きくする」みたいなサンプルばっかりで参考にならなかったので、自分で考えてみた――ら、簡単だった。

<script>
    $(window).bind("resize ready", function(event){
        $('#Content').height(
            $('#Content').height()  + 
            $(window).height() - 
            $(document.body).height()
        );
    });
</script>

#Content がテキストエリアの ID な。JavaScript（jQuery）はさっぱりわからないのだけど、$(window).bind() を使うと複数のイベントに単一の関数を割り当てられるらしい（今回は ready と resize に割り当てたよ！）。テキストエリアが2つ以上になると破たんするけれど、まぁ、とりあえずこれでイケてる。

f:id:daruyanagi:20141115160100p:plain