skuare.netはJavaScriptライブラリのjQuery,mootools,prototypeのプラグインを中心にWebサイト構築に関する技術を試す個人サイトです

テキストエリアを入力内容に応じて自動でリサイズするjQueryプラグイン「autoResize」

｜ ｜ ｜ ｜ ｜ ｜ ｜

フォームに設置するテキストエリアはある程度大きくしておきたいところですが、スペースをとるのは避けたい。
そんなあなたに朗報です。
jQueryプラグインのautoResizeで入力内容に応じてリサイズ可能になります。

使用方法
autoResizeからautoresize.jquery.jsをjQueryからjquery.jsをダウロードします。
<script type="text/javascript" src="jquery-1.3.2.js"></script>
<script type="text/javascript" src="autoresize.jquery.js"></script>
<script>
$(function(){
$('#id名').autoResize({
onResize : function() { //リサイズ時の処理
$(this).css({opacity:0.4});
animateCallback : function() { //リサイズ後の処理
$(this).css({opacity:1});
},
animateDuration : 300, //アニメーション処理速度
extraSpace : 40 //拡大するスペース
});
});
</script>

あとは上記で指定したid名をtextareaに指定します。
<textarea id="id名"></textarea>
テキストエリアを入力内容に応じて自動でリサイズするjQueryプラグイン「autoResize」サンプル

記事作成：2009年03月26日

前の記事：appleに倣え！jQueryで作るiPhoneライクなUI「jqtouch」
次の記事：驚きの画像切り替え！jQueryプラグイン「Jquery.ImageSwitch」