textareaの高さを内容によって自動で調整する方法！
textareaの高さを内容によって自動で調整する方法を解説します。何も設定しないとtextareaがスクロールされ前の文章が何を書いたのか分からなくなります。この問題に対してjQueryを用いてtextareaの高さを内容によって自動で調整させ解決します。
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の高さを+１ずつしていくという事を表しています。
挙動を確認してみよう
それでは実際に先ほど解説したjQueryを用いて、実際の挙動をプレビューで見てみましょう。
また改行ありの文章をテキストボックスに書いてみてください。
このようにtextareaの高さを内容によって自動で変更されることが分かります。
まとめ
いかがでしたでしょうか？
テキストボックスに改行ありの文章を書くと、勝手にスクロールされていき、前に書いた文章が分からなくなってしまう問題は、CSSを用いず、jQueryのみでtextareaの高さを内容によって自動で変更でき、解決することができます。
そうすることで余分なスペースを取らず、コンパクトにtextareaを表示することができ、とても便利です。
ぜひ使ってみてください。
