javascript - jquery如何根据内容减少textarea中的列数

Question

我有一个带有默认列数的文本区域，比如 10 或 15 之类的。我希望文本区域在模糊时将文本收缩包裹在里面。有谁知道如何做到这一点？

到目前为止我有

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

});

但这很丑陋，原因很明显。我只是不知道该怎么做。

有任何想法吗？

Answer 1

删除 'textAreaWidth' 周围的单引号

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

这是一个变量，不需要引号。

Answer 2

如果您只想减小大小，则应检查该值是否小于 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 3

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

这使它在您键入/模糊时缩小或增长。