Javascriptでペースト時にtextareaの高さを自動調整する【コピペでOK】




ペースト時に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>


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




connaiconnai

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>






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






以上、Javascriptでペースト時にテキストエリアの高さを自動調整する方法でした。

コメント

タイトルとURLをコピーしました