Question

我想制作一个动态文本区域，随着内容的增加它应该增加行数。

我正在使用此代码：

$("#text_textarea").keyup(function(e) {
    //splitting textarea value wrt '\n' to count the number of lines
    if ($(this).val().lastIndexOf('\n')!=-1)
    var x = $(this).val().split('\n');
    $(this).attr( "rows" , x.length+1 );
});

但是当用户继续写入时没有给出任何新行\n（按回车键），它就会失败。

Answer 1

var keyUpTimeout = false; // Required variables for performance
var keyupTimer = 0;

$("#text_textarea").keyup(function(e) {
    var cooldownTimeout = 500;
    //Set the cooldown time-out. The height check will be executed when the user
    // hasn't initiated another keyup event within this time

    var ths = this;
    function heightCheck(){
        keyupTimer = false;
        // Reset height, so that the textarea can shrink when necessary
        ths.style.height = "";

        // Set the height of the textarea
        var newheight = this.scrollHeight + 2;
        ths.style.height = newheight + "px";
    }
    if(keyupTimeout){ //Has a cooldown been requested?
        clearTimeout(keyupTimer); //This+next line: Refresh cooldown timeout.
        keyUpTimer = setTimeout(heightCheck, cooldownTimeout);
        return; //Return, to avoid unnecessary calculations
    }

    // Set a cooldown
    keyupTimer = setTimeout(heightCheck, cooldownTimeout);
    keyupTimeout = true; //Request a cooldown
});

这段脚本将改变文本区域的高度以适应文本内部。

更新

我添加了一个额外的功能：为了提高性能（更改CSS高度需要大量的计算机能力），我添加了一个冷却效果：高度检查只会在用户未启动{时执行{1}}事件500毫秒（调整此值以满足您的意愿）。

Answer 2

读这个，

Textarea Height increase

TextAreaExpander (Demo)

autoResize Plugin

JQuery Elastic

Answer 3

您应该在textarea上使用属性wrap='hard'。

Answer 4

我写这段代码。怎么样..

$("#text_textarea").keyup(function(e) {
    var textarea_height = Number($(this).css('height').replace("px", ""))+4;
    var scroll_height = this.scrollHeight;

    if(textarea_height < scroll_height ){   
        $(this).css('height' ,"");
        var x = Number(scroll_height) + 3;
            if(x != $(this).height()) 
        $(this).css("height", x+"px");
     }
});

如何计算textarea中的行数

4 个答案:

更新