フォーム入力
自動リサイズテキストエリア
入力量に合わせて高さが自動で伸びるテキストエリア。scrollHeight に合わせて高さを更新し、文字数カウンタも連動する。
プレビュー
入力
操作実際に入力して試せます。
実装メモ
高さは一度 height:auto に戻してから scrollHeight を代入して測り直すのがコツ（文字を削ったときに縮まなくなるのを防ぐ）。max-height で上限を設け、それ以上はスクロールに切り替えています。
コード（コピーして使えます）
<form class="ag-form" novalidate>
<label class="ag-label" for="ag-area">メッセージ</label>
<textarea
id="ag-area"
class="ag-area"
rows="1"
maxlength="300"
placeholder="入力すると高さが自動で伸びます"
aria-describedby="ag-count"
></textarea>
<div class="ag-footer">
<span class="ag-count" id="ag-count" aria-live="polite">0 / 300</span>
</div>
</form>