テキストエリアの高さを、「スクロール」でなく「エリアを自動伸縮」させたい

Question

テキストエリアで入力に応じて高さ調整する際に、ユーザーが高さ調整できるのではなく、入力に応じて自動で高くなる仕様にしたいです。

例えば下記のように、CSSのresizeを使えばユーザーの高さ調整はなくなりますが、これでは自動で高くなることもありません。

<textarea></textarea>
<style>
textarea { resize: none; }
</style>

そこで下記のように、<textarea>を使うのではなくて、<div>を使えば解決します。ユーザーの高さ調整もできず、同時に自動で高くもできます。

<div contenteditable="true"></div>

しかし今回は、この<div>の方法ではなく、<textarea>のままで自動で高くしたいです。

もしこれができる方がいらっしゃいましたらお知恵をお貸し頂ければと思い致しました。
どうぞ宜しくお願い致します。

Answer 1

jQueryプラグイン「Autosize」で出来ます。
紹介サイト：入力に応じてテキストエリアの高さを調節「Autosize」も参考にどうぞ

Comments

[beer]

便利ですね。ありがとうございます。

Answer 2

ここあたりを参考に書き直します。
と思ったら必要なさそうでした。

<style>
textarea { resize: none; }
#ta { line-height: 5; }
</style>
<textarea id="ta"></textarea>
<script>
var ta = document.getElementById("ta");
ta.style.lineHeight = "20px";//init
ta.style.height = "30px";//init

ta.addEventListener("input",function(evt){
    if(evt.target.scrollHeight > evt.target.offsetHeight){   
        evt.target.style.height = evt.target.scrollHeight + "px";
    }else{
        var height,lineHeight;
        while (true){
            height = Number(evt.target.style.height.split("px")[0]);
            lineHeight = Number(evt.target.style.lineHeight.split("px")[0]);
            evt.target.style.height = height - lineHeight + "px"; 
            if(evt.target.scrollHeight > evt.target.offsetHeight){
                evt.target.style.height = evt.target.scrollHeight + "px";
                break;
            }
        }
    }
});
</script>

Comments

[beer]

どうもありがとうございます。

[退会済みユーザー]

styleのline-heightいりませんでした...

[beer]

何かと思いました。笑