javascript - 如何计算文本区域中的行数

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（按Enter）时，它会失败。

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
});

这段脚本将改变 textarea 的高度以适应里面的文本。

更新

keyup我添加了一个附加功能：为了提高性能（更改 CSS 高度需要大量的计算机功率），我添加了一个冷却效果：只有在用户500 毫秒内没有发起事件时才会执行高度检查（调整此值以满足您的意愿）。

Answer 2

读这个，

文本区域高度增加

---

文本区域扩展器（演示）

自动调整大小插件

jQuery 弹性

Answer 3

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

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");
     }
});