[jQuery]文字量に応じてテキストエリアが自動でリサイズするプラグインjQuery Autosize

jQueryプラグイン・ライブラリ

2013.12.07

フォームのテキストエリアtextareaの高さを、テキスト量に応じて可変にできるjQueryプラグインjQuery Autosizeのご紹介です。

テキストエリアに文字をどんどん打って行くと、文字量に応じてテキストが下へ下へと広がって行きますので、特にスマートフォンサイトのような限られた表示領域でテキストエリアを使う場には必須のプラグインではないかと思います。

jQuery Autosizeのダウンロード
jQuery Autosizeの設置
jQuery Autosizeのデモ

jQuery Autosizeのダウンロード

以下のサイトよりjQuery Autosizeのファイルをダウンロードします。
jQuery Autosize

jQuery Autosizeの設置

jqueryファイルと一緒にjQuery Autosizeファイルを設置します。

<script src="./jquery.min.js"></script>
<script src="./jquery.autosize.js"></script>
<script>
$(function(){
	$('textarea').autosize();
});
</script>

$(function(){

$('textarea').autosize();

});

</script>

textarea全体をリサイズの対象としても良いですし、以下のように

<script type="text/javascript">
$(function() {
	$('textarea.resize').autosize();
});
</script>

$(function() {

$('textarea.resize').autosize();

});

</script>

.resizeなどのクラスを指定して、特定のテキストエリアだけをリサイズの対象とすることもできます。

この場合は、テキストエリアに対して以下のようにクラスを与えてあげます。

<form>
<textarea rows="5" class="resize"></textarea>
</form>

<form>

</form>

jQuery Autosizeのデモ

実際の動きを以下のデモページで確認できます。

jQuery Autosizeの自動リサイズデモ