根据其中有多少文本来扩展文本区域（jquery）

Question

如何让文本区域最初只有 1 行，但当文本到达行末尾时添加另一行，并继续执行此操作，直到最多 5 行？

Answer 1

像这样的东西：

<textarea id="foo" rows="1" cols="40"></textarea>

$(function () {

    $("#foo").on("keyup", function () {

       if ($(this).attr('rows') < 5 &&
           parseInt($(this).val().length/$(this).attr('cols')) >= $(this).attr('rows'))
           $(this).attr("rows", parseInt($(this).attr("rows"))+1);

    });

});

http://jsfiddle.net/Q3pPT/

编辑 轻微改进处理换行符：

$(function () {

    $("#foo").on("keyup", function (e) {

       if ($(this).attr('rows') < 5)
       {
           if (
               parseInt($(this).val().length/$(this).attr('cols'))+
               ($(this).val().split("\n").length-1) 

               >= 

               $(this).attr('rows')
              )
               $(this).attr("rows", parseInt($(this).attr("rows"))+1);

           if (e.keyCode == 13)
           {
               $(this).attr("rows", parseInt($(this).attr("rows"))+1);
           }
       } 

    });

});

http://jsfiddle.net/Q3pPT/2/

Answer 2

这篇列表部分文章提供了深入的步骤有关如何最好地实现此功能的分步说明。

Answer 3

我从 Jake Feasel 的答案中得到了这个想法，它不仅适用于扩展，还适用于收缩文本区域，以防内容较少。

HTML

<textarea id="foo" rows="1" cols="40"></textarea>
<div id="stat"></div>

它还根据单独 div 中的内容显示所需的理想行数

CSS

​#foo
{
resize:none;        
}​

这是必需的，因为一旦使用此处理程序调整了文本区域的大小，代码就会停止工作

JS

$(function () {

    $("#foo").on("keyup", function (e) {       
        var idealRows =  parseInt($(this).val().length/$(this).attr('cols'))+
               ($(this).val().split("\n").length-1)+1 ;
        var rows = $(this).attr('rows');

        // for the bugging scroll bar
        if(rows > 4)  $('#foo').css('overflow','auto')
        else $('#foo').css('overflow','hidden')

        // for expanding and contracting         
        if( (idealRows > rows) && (rows < 5) ||  (idealRows < rows) && (rows > 1))
            $(this).attr("rows", idealRows);                    

    });

});​

演示： http://jsfiddle.net/roopunk/xPdaP/3/

请注意，它还处理在 之间弹出的滚动条keyDown 和 keyUp。 IMO：这有点烦人。

笔记
希望这有帮助！:)

Answer 4

检查 Elastic jQuery 插件： http://unwrongest.com/projects/elastic/

您可以使用CSS 上的 max-height 属性与文本区域的 maxlength 相结合，将其限制为 5 行。

Answer 5

下载此插件： http://james.padolsey.com/demos/plugins /jQuery/autoresize.jquery.js

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