【2021/9/18】登録不要の見積書作成ツール
「SPEEC」を公開しました!

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

こんにちは、ryohei(@ityryohei)です!

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

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の高さを指定していますが、textarearows属性に行数を指定していただいても大丈夫です。お好みな方法でご利用ください。右下の角のリサイズアイコンがいらない場合は、resize: none;を追記すると幸せになれます。

CSS

textarea {
width: 100%;
height: 75px;
}

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

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

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

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の入力内容で高さを自動調整する方法のご紹介でした!

JavaScriptを基礎からしっかりと学びたい方へ

下記の参考書がおすすめです。私がJavaScript入門時に購入した書籍で、基礎から応用まで多様なサンプルを用いて解説されています。ページ数は多いですが、内容が伴っているのですらすら読めます。腰を据えて学びたい方に最良の一冊となっています。

短期間でプログラミングを習得してエンジニアになろう!

エンジニアに転職を考えている方、独学で勉強中の方必見!CodeCampなら自宅にいながら実務経験があるエンジニアからマンツーマンで指導してもらうことができます。実践的なスキルを習得して一日でも早いエンジニアデビューを目指しましょう。まずは無料体験から!

CodeCamp 公式サイトへ

おすすめの書籍