如何获得textarea中的行数?

Cli*_*ote 30 javascript jquery

我想要的是计算textarea中的行数,例如:

line 1
line 2
line 3
line 4
Run Code Online (Sandbox Code Playgroud)

最多可以计4行.基本上按一次输入会转移到下一行

以下代码无效:

var text = $("#myTextArea").val();   
var lines = text.split("\r");
var count = lines.length;
console.log(count);
Run Code Online (Sandbox Code Playgroud)

无论有多少行,它总是给出'1'.

Mot*_*tie 51

使用"\n"或"\ r \n"的问题是它只计算返回的数量,如果你有一个很长的行可以换行,那么它就不会被计为新行.这是获取行数的另一种方法 - 因此它可能不是最佳方式.

编辑(感谢alex):

脚本

$(document).ready(function(){
 var lht = parseInt($('textarea').css('lineHeight'),10);
 var lines = $('textarea').attr('scrollHeight') / lht;
 console.log(lines);
})
Run Code Online (Sandbox Code Playgroud)

更新:这里有一个更彻底的答案:https://stackoverflow.com/a/1761203/145346

  • 此示例不考虑填充.添加填充时,我得到正确的数字:`var padding = parseInt($('textarea').css('paddingTop'),10)+ parseInt($('textarea').css('paddingBottom'),10 )var lines =($('textarea').prop('scrollHeight') - padding)/ lineheight;` (6认同)
  • 我认为你需要用`prop`替换`attr`,至少`attr`对我来说不起作用,每次都返回undefined ... (5认同)
  • @webeno它取决于你使用的jQuery版本.从jQuery v1.6开始,你需要使用`prop()`而不是`attr()`([ref](http://api.jquery.com/prop/#prop2)) (5认同)
  • 你可以用`var lineheight = $('textarea#my-textarea')来减少维护.css('line-height'); (2认同)
  • 这似乎没有返回正确的行高,您必须设置它。 (2认同)

Dou*_*ner 29

如果您只是想测试硬线返回,这将跨平台工作:

var text = $("#myTextArea").val();   
var lines = text.split(/\r|\r\n|\n/);
var count = lines.length;
console.log(count); // Outputs 4
Run Code Online (Sandbox Code Playgroud)


hec*_*vas 22

我已经将lines和lineCount方法实现为String原型:

String.prototype.lines = function() { return this.split(/\r*\n/); }
String.prototype.lineCount = function() { return this.lines().length; }
Run Code Online (Sandbox Code Playgroud)

显然,split方法不会在IE9的字符串末尾(或textarea的innerText属性)中计算回车符和/或换行符,但它会在Chrome 22中计算它,产生不同的结果.

到目前为止,当浏览器不是Internet Explorer时,我通过从行数中减去1来适应这种情况:

String.prototype.lineCount = function() { return this.lines().length - navigator.userAgent.indexOf("MSIE") != -1); }
Run Code Online (Sandbox Code Playgroud)

希望有人有更好的RegExp或其他解决方法.


Mar*_*arz 9

用户\n而不是\r

var text = $("#myTextArea").val();   
var lines = text.split("\n");
var count = lines.length;
console.log(count);
Run Code Online (Sandbox Code Playgroud)