JavaScriptを使ってtextareaの高さを
入力された内容に合わせて自動で可変させる方法

お問い合わせフォームなどに付けるtextareaで、よく設定する高さはどれくらいが適切かということに悩んだ事はありませんか？

あまりに高さを低く設定してしまうと書いた内容を見直す時に何度も何度もスクロールしなければならない一方で、高さを高くしすぎるとページの大半が最初からtextareaだけで埋まってしまって見た目が良くない…と考えたりしてしまいます。

実は、そんなtextareaの高さの最適解は、入力内容に応じて高さを自動で広げたり縮めたりとJavaScriptを使って自動的に調整してくれる方法がありそれを使うべきとも言えます。

今回はそんなtextareaの高さを入力内容に合わせて自動で調整する方法についてまとめています。

自動でtextareaの高さが可変するコード

こういうのはコードを見て解説していく方が早いかと思いますので、下記にサンプル・デモを用意していますので、1つ1つ見ていきましょう。

使うHTMLのコード

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

大事になるポイントは、idを指定しているところです。
このidを指定していることによって、JavaScriptで要素を取得できる（しやすく）ようになっています。

使うCSSのコード

#textarea{
  width: 100%;
  height: 300px;
}

CSSは逆にこれといったところはありません。
何も入力されていないtextareaの際に表示される高さや横のサイズを指定しておきましょう。

使うJavaScriptのコード

ここが今回の一番のポイントになります。

const ta = document.getElementById('textarea');
const ch = ta.clientHeight;
textarea.addEventListener('input', ()=>{
  ta.style.height = ch + 'px';
  const sh = ta.scrollHeight;
  ta.style.height = sh + 'px';
});

ということで、1つ1つ見ていきましょう。

const ta= document.getElementById('textarea');

ここで、textareaの要素を取得しています。
id=textareaと指定したので、そのidの値を取得していることになります。

const ch = ta.clientHeight;

ここで、textareaのデフォルトの高さを取得しています。
○○.clientHeight;というのが、表示域の高さを取得するJavaScriptのコードになります。

textarea.addEventListener('input', ()=>{
  ta.style.height = ch + 'px';
  const sh = ta.scrollHeight;
  ta.style.height = sh + 'px';
});

1行目が、inputイベントと呼ばれるものになり、今回の場合で言うとtextareaに文字が入力された時にということになります。

2行目が、先ほど取得したデフォルトのtextarea高さをpx単位として、それをtextareaのheightに設定をしています。○○.style.heightというのが、○○の要素のcssのheightプロパティの値を設定するというJavsScriptのコードになります。

3行目が、再度textareaの高さを取得しています。

4行目が、3行目で取得したtextareaの高さをpx単位として、textareaのheightに設定をしています。

いまいちこれだけだと分からないという方もいるかもしれませんので、この1行目～4行目の流れを説明すると

1. 今のテキストエリアの高さを取得
2. その値をtextareaのheightの高さに指定
3. テキストエリアに文字が入力されたら、その高さを再び取得
4. その値をtextareaのheightの高さに指定

というのをひたすら繰り返しているという事になります。
簡単に言えば、文字が入力される度に高さを取得し、その高さをtextareaのheightに設定しているということになります。

そのため、文字が入力された際に、改行されていない場合はtextareaの高さには変化がないため高さは変わりませんが、改行された場合はtextareaの高さが変わるため、高さを取得してpx単位としてそれをtextareaのheightに指定している。という処理になります。

実際にtextareaの高さが自動可変するサンプル

では上記のコードを実際に書いて見たらこのようになります。

ただもしかすると他のcss設定などとバッティングしてしまって多少見た目などにズレが出てしまったりおかしくなったりする場合もあるかもしれませんが、その場合は下記を試してみましょう。

スクロールバーが表示される場合

今回の設定では、自動で可変されるためtextareaにスクロールバーは本来表示されません。
上記のtextareaでも文字を入力して行数を増やしていけば、自動で可変されますがスクロールバーは出ずに高さが自動的に変わっていきます。

しかしながらスクロールバーがもし表示されてしまうという場合はoverflowの値を追加しておくと消える事になります。

textarea{
  overflow: hidden;
}

ただし高さの可変がうまくいかないときにこれをいれると、高さが変わらないままスクロールもできないとなるので注意しましょう。

高さが変わる時にアニメーションが付く場合

普段は便利なアニメーションですが、textareaにtransitionの設定を入れている場合、今回の自動可変の場合は改行が入る度に動きが付いてしまって逆に鬱陶しくなってしまいます。

そんな場合は、transitionの設定を消しておきましょう。

textarea{
  transition: unset;
}

ちなみに、transitionのデフォルトはunsetになります。（ただしnoneでも同じ動きにはなります）

高さが長くなりすぎると今度は使いにくい場合も

高さが自動で可変していくということは、言い換えれば極論ではどこまでも長く続いていくという事にもなります。そのため、割と長文を入れるような場合には逆に不適切になってしまう場合があります。

こういったケースでは、max-heightの値を入れておくことで、それ以上は自動で可変せずスクロールバーを表示する形にするといった見せ方にもできます。この場合は、overflowの値をいじってるとおかしくなるのでそこも注意が必要です。

どういう内容が想定されるのかなどに合わせて、使い分けておくと良いのではないかと思います。

CSSのresizeも合わせて設定しておく

この記事の前にCSSのresizeについて解説しました。

resizeはtextareaの右下に出てくるつまみでサイズ変更を制御するものになりますが、今回のtextareaの高さを自動で調整する場合、このresizeも禁止しておく必要があります。

禁止をしないと、仮につまみでリサイズをしたとしても、文字を入力した瞬間にその高さを自動取得して、その高さの値をheightに設定するため、リサイズしたものが入力した瞬間に無効になってしまいます。

そのため、下記のcssも合わせて入れて置く方がよいと言えます。

textarea{
  resize: none;
}

こうすることで、高さが入力内容に合わせて自動で可変していくテキストエリアの完成になります。

まとめ

お問い合わせフォームなどに設定するtextareaの高さが入力内容に合わせて自動で変わる設定について見て来ました。

フォームなどに長文の入力なら事前にメモやテキストエディタなどで作ってから貼り付けて投稿をする方も多いかもしれませんが、そういうのはお問い合わせフォームなど定型文を送るパターンだったりで、実際にはその場で都度入力して送るというケースも多かったりします。

そういう時に、入力内容に応じて高さが自動的に変わってくれればわかりやすく読み直しなどもしやすくなるケースもあるかと思います。

とはいえ100行でも200行でも改行を入れれば入れるだけ高さは伸びていくので、最大値を設定するかそもそも長文が入力されるフォームでは違う対策をという考えも大事になってくるかもしれません。

とはいえ使い方さえ間違えなければ割と使い勝手も良いものにもなるので、用途に合わせて使っていきましょう。