入力内容に応じてtextareaの高さを調整する

CSS4のfield-sizing()を使うことで、忌々しいtextareaの高さ問題を自動調整できるようになる。 field-sizing: fixed | contentを使うと、入力内容に応じてテキストエリアなどの高さを自動で変更できる。

※2024-03-14時点では、Chrome123、Edge123でのみ利用可能

<textarea></textarea>

<style>
textarea {
  field-sizing: content;  /* 入力内容にあわせてフィールドのサイズがかわる */
  width: 20ch; /* 幅も入力内容で変わってしまうので固定する */
}
</style>

デモ

JavaScriptやcontenteditable属性などは一切使っていない。