入力フォームを入力に合わせて自動拡張する（autoResize）

フォームが小さすぎて長い文章を書くのが大変！という場合が時々あります。
だからといって、フォームを大きくすると場所と取りすぎて邪魔！っていうことになってしまいます。

必要な時だけフォームがでかくなればいいのに。。

その願いをかなえるのが、jQueryの「autoResize」プラグインです。

これを使えば入力すればするするほどテキストエリアが広がっていきます！(行のみですが)

使い方は以下のような感じ！
簡単です！

<title>autoresize</title>



$(function(){
    $('#resize').autoResize({
        // On resize:
        onResize : function() {
        $(this).css({opacity:0.9});
        },
        // After resize:
        animateCallback : function() {
            $(this).css({opacity:1});
        },
        // Quite slow animation:
        animateDuration : 300,
        // More extra space:
        extraSpace : 40
    });
});




<textarea name="body" cols="90" rows="5" id="resize"></textarea>

<title>autoresize</title>

$(function(){

$('#resize').autoResize({

// On resize:

onResize : function() {

$(this).css({opacity:0.9});

// After resize:

animateCallback : function() {

$(this).css({opacity:1});

// Quite slow animation:

animateDuration : 300,

// More extra space:

extraSpace : 40

});

ここで注意が必要なのが最初に以下のDOCTYPEを入れないとInternet Explorerではうまくいきませんでした。