如何计算textarea中的行数

我想创建一个动态文本区域，它应该随着内容的增加而增加。

我正在使用此代码：

$("#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的高度以适应文本内部。

更新

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

Answer 2

读这个，

Textarea高度增加

---

TextAreaExpander（演示）

autoResize插件

JQuery弹性

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