Javascriptでペースト時にtextareaの高さを自動調整する

ペースト時にtextareaの高さを自動調整する方法を記しています。JavascriptとjQuery両方のコードを載せています。

実装イメージ

このようにペーストした時に、textareaの高さが自動調整されるイメージになります。

Javascript

<textarea rows="1" placeholder="デモ"></textarea>

<script>
    document.querySelector('textarea').addEventListener("paste", function (e) {           
        setTimeout(function(){
            e.target.style.height = 0
            e.target.style.height = e.target.scrollHeight+"px"
        },100)
    });
</script>

こちらのデモで実際の動きをご確認頂けます。

jQuery

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<textarea placeholder="デモ"></textarea>

<script>
    $(document).bind("paste","textarea",function(e){
        setTimeout(function(){
            $(e.target).height(0).innerHeight(e.target.scrollHeight)
        },100)
    })
</script>

文字入力や削除に合わせて、テキストエリアの高さを自動調整したい場合はこちらの記事が参考になると思われます。