Javascriptでtextareaの高さを自動調整する

テキストエリアの高さを自動調整する方法を記しています。JavascriptとjQuery両方のコードを載せています。

実装イメージ

このように入力に合わせてテキストエリアの高さが自動調整されるイメージです。

Javascript

<textarea class="auto-adjust" rows="1" placeholder="デモ"></textarea>

<script>
    document.querySelectorAll(".auto-adjust").forEach(function(){
        this.addEventListener('keydown',function(e){
            e.srcElement.style.height = 0
            e.srcElement.style.height = e.srcElement.scrollHeight+"px"
        })
    })
</script>

こちらのデモで実際の動きをお試しいただけます。

jQuery

jQueryで書く場合は下記のようになります。

<textarea class="auto-adjust" rows="1" placeholder="デモ"></textarea>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
    $(document).on("keydown",".auto-adjust",function(){
        $(this).height(0).innerHeight(this.scrollHeight)
    })    
</script>

textreaに transition:1s; などがついていると動かないので、外す必要があります。

ペースト時にテキストエリアの高さを自動調整したい場合はこちらの記事が参考になると思われます。