textareaの高さを自動調整する方法

実現したいこと

▪️ ページ表示時に、textareaの高さを自動で入力内容に合わせる

▪️ 入力中もリアルタイムで高さを調整する

▪️ create画面でもedit画面でも、バリデーションエラー後のold値でも対応可能にする

コード

HTML側

<textarea oninput="autoResize(this)">既に入力済みのテキスト</textarea>

JavaScript側

<script>
document.addEventListener('DOMContentLoaded', function () {
    // ----- ページ表示時(1回目)の高さ調整
    document.querySelectorAll('textarea').forEach(function (textarea) {
        autoResize(textarea); // 既存値がある場合に高さを調整
    });
});

// ----- 入力時(2回目)高さを調整する関数
function autoResize(el) {
    el.style.height = 'auto'; // 一旦リセット
    el.style.height = el.scrollHeight + 'px'; // 中身に応じて高さ設定
}
window.autoResize = autoResize; // oninputなどHTMLから呼び出せるようにする
</script>

解説

1.ページ表示時（1回目）

DOMContentLoaded 内で querySelectorAll('textarea') を回して autoResize() を実行

これにより edit画面の既存値 や create画面のold値 でも、表示時点で高さが合う

2.入力中（2回目以降）

oninput="autoResize(this)" によりリアルタイム調整

3.create / edit / old 対応

old('description', $task->description ?? '') と書くことで、

create画面 → バリデーションエラー後のold値が反映

edit画面 → DBの既存値が反映

どちらも高さ自動調整が効く

動作イメージ例

▪️ edit画面で長文が入っている → 開いた瞬間に高さが自動で伸びる
▪️ バリデーションエラーで戻った時 → 入力済みの高さが維持される

editページ表示時(&バリデーションエラー後ページ表示)

編集後

▪️ create画面で入力 → 入力しながら高さが伸びる
入力前

入力後