【JavaScript】textareaの入力内容で高さを自動調整する

こんにちは、Ryohei（@ityryohei）です！

本記事では、JavaScriptでtextareaの入力内容で高さを自動調整する方法をご紹介しています。

上記の疑問にお答えします。

では、解説していきます。

本記事で作成するもの

本記事の内容で完成するものがこちら！textareaに値を入力していくと、スクロールバーが表示される行数になった場合にtextareaの高さが自動的に調整されるようになっています。実際に操作してみてください。

See the Pen
6153 by ryohei (@intotheprogram)
on CodePen.

注意点としては、textareaの高さを右下の角からマウス等でリサイズすると、幅は維持できますが高さは入力内容に応じて自動で調整されます。その点だけご認識ください。

では、作成していきましょう！

textareaの要素を作成する

HTMLでtextareaを作成します。本記事では要素が取得しやすいようにidを指定しています。フォーム等で使用する場合はformsプロパティなどで取得できるかと思います。

HTML

<textarea id="textarea"></textarea>

textareaのスタイルを定義する

作成したtextareaにCSSでスタイルを定義します。本記事ではCSS側でtextareaの高さを指定していますが、textareaのrows属性に行数を指定していただいても大丈夫です。お好みな方法でご利用ください。右下の角のリサイズアイコンがいらない場合は、resize: none;を追記すると幸せになれます。

CSS

textarea {

    width: 100%;

    height: 75px;

}

textareaの高さを自動調整する処理を作成する

最後にJavaScriptでtextareaの入力内容によって高さを自動調整する処理を作成します。スクリプトの内容はコメントに記載していますので、参考にしていただければ！

ちなみに8行目で実行している高さの再設定を外すとtextareaのinputイベントが発生するたびに高さが増えていくのでご注意ください。

JS

//textareaの要素を取得

let textarea = document.getElementById('textarea');

//textareaのデフォルトの要素の高さを取得

let clientHeight = textarea.clientHeight;

//textareaのinputイベント

textarea.addEventListener('input', ()=>{

    //textareaの要素の高さを設定（rows属性で行を指定するなら「px」ではなく「auto」で良いかも！）

    textarea.style.height = clientHeight + 'px';

    //textareaの入力内容の高さを取得

    let scrollHeight = textarea.scrollHeight;

    //textareaの高さに入力内容の高さを設定

    textarea.style.height = scrollHeight + 'px';

});

以上でtextareaの高さを自動調整する処理の作成は完了です！

最後に

本記事の内容は先日携わった案件で実装することになった処理と同様のものになります。textareaはユーザー側で好きなようにリサイズできるので、基本的にはあまり必要ないかな、と思います。ただ入力内容全体を視認できるようにしたい場合はとても有効な方法ですので、クライアントと話し合って決めていただければと思います。

以上、JavaScriptでtextareaの入力内容で高さを自動調整する方法のご紹介でした！