フォームのテキストエリアtextareaの高さを、テキスト量に応じて可変にできるjQueryプラグインjQuery Autosizeのご紹介です。
テキストエリアに文字をどんどん打って行くと、文字量に応じてテキストが下へ下へと広がって行きますので、特にスマートフォンサイトのような限られた表示領域でテキストエリアを使う場には必須のプラグインではないかと思います。
jQuery Autosizeのダウンロード
以下のサイトよりjQuery Autosizeのファイルをダウンロードします。jQuery Autosize
jQuery Autosizeの設置
jqueryファイルと一緒にjQuery Autosizeファイルを設置します。|
1 2 3 4 5 6 7 |
<script src="./jquery.min.js"></script> <script src="./jquery.autosize.js"></script> <script> $(function(){ $('textarea').autosize(); }); </script> |
textarea全体をリサイズの対象としても良いですし、以下のように
|
1 2 3 4 5 |
<script type="text/javascript"> $(function() { $('textarea.resize').autosize(); }); </script> |
.resizeなどのクラスを指定して、特定のテキストエリアだけをリサイズの対象とすることもできます。
この場合は、テキストエリアに対して以下のようにクラスを与えてあげます。
|
1 2 3 |
<form> <textarea rows="5" class="resize"></textarea> </form> |
jQuery Autosizeのデモ
実際の動きを以下のデモページで確認できます。jQuery Autosizeの自動リサイズデモ
コメント