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

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

スポンサード

フォームのテキストエリアtextarea の高さを、テキスト量に応じて可変にできるjQuery プラグイン「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 の自動リサイズデモ

スポンサード