textareaをheight=100%でスクロールしないようにしたい。

投稿日：

htmlのtextareaをコンテンツの高さに合わせたくて調査したときの覚書。

環境： jQuery 3.5.1

CSSのheight: 100%は親要素に合わせてしまう。

textareaの内包している値を全部見えるようにしてスクロールしないようにしたい。


結局JavaScriptでtextareaの内部コンテンツの高さを取得して設定する必要があった。

jQueryを使うとこんな感じ。

jQuery(function($) {
  let $textarea = $('#textarea-id');
  $textarea.on('keyup', function() {
      $textarea.height('auto'); // Initialize
      $textarea.height($textarea.prop('scrollHeight') - $textarea.height());
  });
});


CSS

textarea {
  overflow: hidden;
  resize: none;
  padding: 12px 16px;
}

スマホの場合は実行しない方がいいかもしれない。