テキストを入力するとテキストエリアが広がる

Result

jQuery

$.fn.textarea = function(){
    function init(){
        //全体をラップする
        var $textarea = $(this).wrap('<div class="textarea"></div>');
        //要素を指定した他の要素の後に挿入
        var pre = $('<pre></pre>').html($textarea.val()).insertAfter($textarea);
        $textarea.bind('keyup change click focus',function(e){
            pre.html($textarea.val());
        });
    }
    return this.each(init);
};
$('textarea').textarea();​

css

.textarea{
    width:200px;
    position:relative;
    font-size:12px;
    line-height: 1.5em;
}
.textarea textarea{
    width:100%;
    min-height:100%;
    display:block;
    position:absolute;
    font-size:12px;
    line-height: 1.5em;
    padding: 0px;
    resize: none;
}
.textarea pre{
    display:block;
    min-height: 50px;
    font-size:12px;
    line-height: 1.5em;
    padding-top:1em;
    white-space: pre-wrap;
    word-wrap: break-word;
}​

html

<textarea></textarea>​

via

Self_resizing_textarea-rSq