jqueryコンテンツに基づいてテキストエリアのcolsの数を減らす方法

Question

私は、10または15などのデフォルトの列数を持つテキストエリアを持っています。私は、テキスト領域に、ぼかしでテキストをシュリンクラップする必要があります。誰もこれを行う方法を知っていますか？

これまでのところ私は

$('textarea').live('blur', function() { 
    var textAreaWidth = $(this).val().length; 
    $(this).attr('cols', 'textAreaWidth'); 

}); 

を持っている。しかし、これは明白な理由のために醜いです。私はちょうどこれを行う手掛かりがありません。

すべてのアイデア？

Answer 1

サイズを小さくする場合は、値が20未満であることを確認してから列の数を減らしてください。これは、あなたが/ぼかしを入力すると、それが縮小または成長になり

<textarea rows="2" cols="20"></textarea> 

$('textarea').on('blur', function() { 
    var textAreaWidth = $(this).val().length; 

    if (textAreaWidth < 20) { 
     $(this).attr('cols', textAreaWidth); 
    } 
    $('textarea').on('keypress', function() { 
     $(this).attr('cols', '20'); 
    }); 
}); 

http://jsfiddle.net/4bccm/

Answer 2

周りからの単一引用符を削除「textAreaWidth」

$(this).attr('cols', 'textAreaWidth');

にこれは可変であり、その周りに引用符は必要ありません。

Answer 3

$('textarea').bind('blur keyup', function() { 
    $(this).attr('cols', $(this).val().length); 
});​ 

：これを試してみてください。