文字数に応じてテキストエリア高さを自動調節するプラグイン「autoexpand」を紹介します。
jQueryプラグイン「autoexpand」
HTML のフォーム部品 textareaタグの中にテキストを書き込みんでいると……ちょっと多く書いただけではみ出す場合がよくあります。フォームのサイズはWeb制作者の悩みのひとつかもしれませんね。
そんな場合は今回紹介するプラグイン「autoexpand」を使いましょう。テキストを書き込めば自動的にフォームが拡がってくれるという便利機能が簡単に手に入ります。
それではデモのテキストエリアを編集してみてください。
「autoexpand」のデモ
デモのソース(HTML + jQuery)
< meta name = "description" content = "autoexpandのデモでーす。" > |
< title >autoexpand - jQueryプラグイン</ title > |
< h1 >autoexpand のデモでーす。</ h1 > |
< p >普通(auto-expand 適用なし)</ h2 > |
ああああああああああああああああああああああああああああ |
いいいいいいいいいいいいいいいいいいいいいいいいいいいい |
うううううううううううううううううううううううううううう |
ええええええええええええええええええええええええええええ |
おおおおおおおおおおおおおおおおおおおおおおおおおおおお |
< textarea id = "autoexpand" > |
ああああああああああああああああああああああああああああ |
いいいいいいいいいいいいいいいいいいいいいいいいいいいい |
うううううううううううううううううううううううううううう |
ええええええええええええええええええええええええええええ |
おおおおおおおおおおおおおおおおおおおおおおおおおおおお |
< script src = 'https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js' ></ script > |
< script src = 'jquery.autoexpand.js' ></ script > |
$('textarea#autoexpand').autoExpand(); |
jsファイルのダウンロード、オプション詳細はこちらからどうぞ。