jQueryで自動リサイズする textarea を数行で実装する方法

テキストエリア（textarea）で高さ分だけはみ出した場合・・・

普通はスクロールバーが表示されます。

別にそれでも困らないと言えばそうなんですが、何か入力しにくいですよね。

そこで jQuery を使い、数行で自動リサイズできる textarea を作ってみました。

入力・貼り付けなどをイベント監視
行数が元の高さ以上になる
そうしたら１行分だけ高さ追加
以下同じこと繰り返し・・・

　▲ こういう感じで

使う側にとっても便利になると重いので、その作り方とコード例を紹介します。

このページの目次

手順１．まず専用の textarea 要素を作成する
手順２．自動リサイズ用のコードを追加
もし textare の自動リサイズが上手く働かないなら...
ここまでのまとめ

手順１．まず専用の textarea 要素を作成する

ここでは textarea 自体にはなるべく手を加えず、自動リサイズ機能をつけます。

やることは textarea に専用のクラス名を付けるだけです。

なので、次みたいな要素を作成

<textarea class="auto-resize"></textarea>

1	<textarea class="auto-resize"></textarea>

ポイントは auto-resize というクラス名を付けること

このクラス名はもちろん任意の名前でＯＫです。

でも今回は説明のために、分かりやすく auto-resize というクラスを割り振っておきます。

手順２．自動リサイズ用のコードを追加

お次は肝心の自動リサイズ機能の実装

ここでは次のイベントが起こるたびに、高さを自動調整できるテキストエリアを実装します。

change
keyup, keydown
paste, cut

内容が変化したのを知りたいなら、 change だけでも十分なんですが・・・

キーの押下とか貼り付け・切り取りでは change イベントが呼ばれません。

なので keyup 、 keydown とか cut 、 paste も監視イベントに含めることにしました。

では自動リサイズするコード例を紹介します。

それがコチラ！

$(function(){
  $('textarea.auto-resize')
  .on('change keyup keydown paste cut', function(){
    if ($(this).outerHeight() > this.scrollHeight){
      $(this).height(1)
    }
    while ($(this).outerHeight() < this.scrollHeight){
      $(this).height($(this).height() + 1)
    }
  });
});

$(function(){

$('textarea.auto-resize')

.on('change keyup keydown paste cut', function(){

if ($(this).outerHeight() > this.scrollHeight){

$(this).height(1)

}

while ($(this).outerHeight() < this.scrollHeight){

$(this).height($(this).height() + 1)

}

});

ここでやってることを箇条書きすると次の通り

スクロール高さが要素高さより小さい場合
１行分しか入力されていないと判断し、 $(this).height(1); を設定
スクロール高さに合うように要素高さを拡張する
このコードの while ($(this).outerHeight() < this.scrollHeight) の部分

これでテキストエリア内に入力した文字が横幅一杯になった時、
自動的に１行分だけ高さを追加して自動リサイズしてくれるようになります。

別に特別なことは何１つしてません、

あとタイトルに「数行」って書いたけど、１０行超えてますね。(-_-;)

もし数行に収めたいなら、色々工夫すれば数行以内に収まります。

実際にこの textarea に入力したときの様子はコチラ

▼ 半角文字を入力した場合

▼ 全角文字を入力した場合

ちゃんと行が足りなくなったら、自動でリサイズしてくれてます。

あと全角の入力途中だったり、貼り付けした時でも・・・

change 以外のイベントも監視してるので問題なくリサイズ可能

あとそれから、実際の動作は次の CodePen から試せます。

See the Pen
自動リサイズするtextareaの実装 by ぴー助 (@pisuke-code)
on CodePen.

こういう感じ

もし textare の自動リサイズが上手く働かないなら...

今紹介したコードなんですが、条件によっては上手く動かないことがあります。

その条件とは次みたいな場合

動的にtextarea要素を追加した場合
イベント登録後に要素を追加した場合

DOM読み込み時ではなく、その後に textarea を追加しちゃうと動きません。

その場合は先ほどのコードを、次のように書き直せばOK

$(function(){
  $(document).on('change keyup keydown paste cut', 
    'textarea.auto-resize', function()
  {
    if ($(this).outerHeight() > this.scrollHeight){
      $(this).height(1)
    }
    while ($(this).outerHeight() < this.scrollHeight){
      $(this).height($(this).height() + 1)
    }
  });
});