textareaの高さを内容によって自動で調整する方法!

textareaの高さを内容によって自動で調整する方法を解説します。何も設定しないとtextareaがスクロールされ前の文章が何を書いたのか分からなくなります。この問題に対してjQueryを用いてtextareaの高さを内容によって自動で調整させ解決します。

コンテンツ [表示]

  1. 1textareaの高さを内容によって自動で調整したい
  2. 2textareaの高さを内容によって自動で調整する方法
  3. 2.1jQueryのコード解説
  4. 2.2挙動を確認してみよう
  5. 3まとめ

textareaの高さを内容によって自動で調整したい

textareaの高さを内容によって自動で調整し、見やすくしたいと思うことがあります。

ただ何も設定しないと内容によって、textareaのテキストボックスが勝手にスクロールされ前の文章が何を書いたのか分からなくなります。

あえて小さなtextareaを用いて、実際何も設定しないとどのような挙動になるのか確認してみましょう。
以下のテキストボックスに改行ありの文章を書いてみてください。

このように勝手にスクロールされていき、前に書いた文章が分からなくなってしまいます。

では以下でテキストボックスに改行ありの文章を書くと、勝手にスクロールされていき、前に書いた文章が分からなくなってしまう問題を解決していきます。

textareaの高さを内容によって自動で調整する方法

さっそくtextareaの高さを内容によって自動で調整する方法について解説していきます。

ここではjQueryを用いて解説しますが、もしjQueryを用いたことがなくても、1つ1つのコードを詳しく解説するので安心してください。

jQueryのコード解説

まずjQueryで使うコードを紹介します。

$(function(){
  $('#textarea')
  .on('input', function(){
    if ($(this).outerHeight() > this.scrollHeight){
      $(this).height(1)
    }
    while ($(this).outerHeight() < this.scrollHeight){
      $(this).height($(this).height() + 1)
    }
  });
});

ではさっそく関数の中身を見ていきましょう。

まずtextareaにid属性でtextareaと付け、その要素をjQuery内で取得します。

次にonメソッドでtextareaにイベントが起きた時に何かしら処理するように設定します。

onメソッドの第一引数のinputについて説明します。

これは何かtextareaに内容が追加されたときにイベントを発生させることを意味します。

次にonメソッド内の関数について見てみます。

ここでのouterHeigth()とはpadding、borderまで含めたtextareaの高さとなります。scrollHeightとはスクロールがある場合のtextareaの高さとなります。

outerHeight()>scrollHeightでスクロールがない時のtextareaの高さを表しています。
そしてその時はtextareaの高さは変わらないように設定しています。

次にouterHeight()<scrollHeightすなわちスクロールがあるとき、スクロール分だけtextareaの高さを+1ずつしていくという事を表しています。

あわせて読みたい
outerHeight()
jQueryのouterHeight()はボックスの中のコンテンツ、padding(内部的な余白)、border(枠線)を含む高さを計算しその値を返します。outerHeight()の使い方をサンプルコード付きで解説します。

挙動を確認してみよう

それでは実際に先ほど解説したjQueryを用いて、実際の挙動をプレビューで見てみましょう。

また改行ありの文章をテキストボックスに書いてみてください。

このようにtextareaの高さを内容によって自動で変更されることが分かります。

まとめ

いかがでしたでしょうか?

テキストボックスに改行ありの文章を書くと、勝手にスクロールされていき、前に書いた文章が分からなくなってしまう問題は、CSSを用いず、jQueryのみでtextareaの高さを内容によって自動で変更でき、解決することができます。

そうすることで余分なスペースを取らず、コンパクトにtextareaを表示することができ、とても便利です。

ぜひ使ってみてください。

【期間限定】全カリキュラム無料で提供中!

Qumeru

Qumeru[クメル]ではプログラミング学習が出来るカリキュラムを期間限定で無料で提供しています。

無料登録することで、すぐにプログラミング学習を始められます。ぜひカリキュラムをお試し下さい!

関連記事

【期間限定】全カリキュラム無料で提供中!

Qumeru[クメル]ではプログラミング学習の全カリキュラムを期間限定で無料で提供しています。

無料登録することで、すぐにプログラミング学習を始められます。ぜひお試し下さい!

目次