ロードが完了した時点でtextarea内の長文をすべてを表示したい

Question

現在、データベースと関連付けたアプリの実装を行っております。
つきまして、textareaについてお伺いしたい事があり、投稿致しました。

現状

textarea（col="30" row="3"程度）の中に、ページをロードした時点で、データベースの内容が反映される格好で、元々その表示枠からはみ出る程の長い文が入っています。
これらtextareaはクリックしてアクティブにすると、入力された内容全体が表示されるようにできています。

したいこと

しかしここで、これらのtextareaの表示枠が、クリックせずともロードされた時点で拡大して、入力されている内容の全文が表示されるようにしたいです。

試したこと・コードの現状

HTMLのtextarea部分とJavaScriptのコードの現状です。

<div class="col-8">
   <textarea id="txt1" class="form-control auto-resize" type="text" placeholder="" th:text="${message.answer}" readonly>サンプルテキストです。サンプルテキストです。サンプルテキストです。サンプルテキストです。サンプルテキストです。サンプルテキストです。サンプルテキストです。サンプルテキストです。サンプルテキストです。サンプルテキストです。</textarea>
   <textarea id="txt2" class="form-control auto-resize" type="text" placeholder="" th:text="${message.answer}" readonly>サンプルテキストです。サンプルテキストです。サンプルテキストです。サンプルテキストです。サンプルテキストです。サンプルテキストです。サンプルテキストです。サンプルテキストです。サンプルテキストです。サンプルテキストです。</textarea>
   <textarea id="txt3" class="form-control auto-resize" type="text" placeholder="" th:text="${message.answer}" readonly>サンプルテキストです。サンプルテキストです。サンプルテキストです。サンプルテキストです。サンプルテキストです。サンプルテキストです。サンプルテキストです。サンプルテキストです。サンプルテキストです。サンプルテキストです。</textarea>
</div>

//textarea自動height調整： textareaタグにauto-resizeクラスを付与により実装
    $(function(){
    	  $('textarea.auto-resize').on('change keyup click keydown paste cut', function(){
    	    if ($(this).outerHeight() > this.scrollHeight){
    	        $(this).height(2)
    	    }
    	    while ($(this).outerHeight() < this.scrollHeight){
    	        $(this).height($(this).height() + 1)
    	    }
    	    $(this).height(2);
    	    $(this).height(this.scrollHeight);
    	  }).trigger('change');
    });

解決したいこと

以上のように「.trigger('change')」をつけて試みても、ロード完了後にtextareaの全文が表示されません。
上記のコードをどのように修正すれば、ロード時に全文が表示されるようになるでしょうか。

今回もまた恐縮ですが、ご存じの方、ご回答の程お願いします。

Answer 1

失礼致しました。

キャッシュを消去しきれていなかったようで、キャッシュ消去後に上記のJQueryの実装済みコードで再試行してみたところ、今度はロード後にtextareaの中身全体が正常に表示されました。

お騒がせ致しました...

Answer 2

textareaはクリックしてアクティブにすると、入力された内容全体が表示されるようにできています。

であれば、Javascriptからクリックすれば良いのでは？

$('textarea.auto-resize').click()

Comments

[Nishin]

ご回答ありがとうございます。

すみません。textareaは複数あるということをコードで表記しておりませんでした。
クリックするとtextareaの表示枠を拡大できるところまでは実装できたのですが、クリックしなくても、ページに遷移したり画面がロードされたりした時点で、すべてのtextareaの表示枠が自動的に、データベースから反映されてきた長文全体が表示されるように拡大してくれるような機能を実装したいと考えております。
しかし、textareaの場合はそこまでの機能はなく、それぞれをクリックしないと開けないようになっているのでしょうか・・・。

[m.ts10806]

auto-resizeクラスがついている要素全てがクリックされるはずです。