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

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

環境： jQuery 3.5.1

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

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

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

jQueryを使うとこんな感じ。

jQuery(function($) {

  $(window).on('load', function() {

    let $textarea = $('#textarea-id');

    $textarea.height('auto'); // Initialize

    $textarea.height($textarea.prop('scrollHeight'));

  });

});

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