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

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

我正在使用以下代码：

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

但当用户继续写入而不按Enter键给出任何新行时，它将失败

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

使现代化

---

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

您应该在文本区域上使用wrap='hard'属性。

阅读此内容

---

我写这段代码。怎么样

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

---

你的意思是在一行中不合适时发生的单词换行吗？可能的重复-已接受答案中的代码显示了如何解决此问题。不幸的是，由于标准要求处理单词换行的奇怪规则，这种情况非常可怕。如果你知道我的意思，甚至比事件鼠标位置更糟糕。@pimvdb是的，你是对的。发生的单词扭曲导致线条增加。这段代码无法检测到，你可以详细说明这些引用的目的，而不是回复阅读，谢谢你的评论，是的，我想要的是一样的。但是我不想使用任何插件。你能详细说明一下这些插件中使用了什么逻辑吗？看来这个属性是专有的。。我错了，这很好。但在此代码中，文本区域高度一旦增加，即使内容被删除或内容高度降低，也不会减少。style.height=；在变量x之前=…是，它正在工作。。但我不知道为什么在写的时候，性能会降低。我想是因为在每次键控时调用函数。可以纠正吗？

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