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

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

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

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

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

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

 ▲ こういう感じで

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

手順1.まず専用の textarea 要素を作成する

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

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

 

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

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

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

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

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

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

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

  • change
  • keyup, keydown
  • paste, cut

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

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

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

 

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

それがコチラ!

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

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

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

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

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

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

 

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

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

自動リサイズするtextareaに半角文字を入力している様子

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

自動リサイズするtextareaに全角文字を入力している様子

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

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

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

 

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

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

こういう感じ

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

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

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

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

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

 

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

このコードの意味とか原因、それについては次記事をチェック

動的追加した要素は、普通に onメソッド でイベントを受け取れないので注意です。

ここまでのまとめ

ということで、jQuery で自動リサイズする textarea を作る方法でした。

利便性の高いフォーム(?)とかを作るときに便利かもしれません。ではまた(^^)/~~~

Shareこの記事をシェアしよう!

Commentsこの記事についたコメント

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA


このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください