如何使用JavaScript获取<textarea>中的行数？

我有一个<textarea>元素。 我可以使用JavaScript来检测其中是否有（例如）10行文本？

Answer 1

那么我find了一个更简单的方法来做到这一点，但是你需要设置CSS中textarea的行高。 我试图读取脚本ta.style.lineHeight内的行高，但似乎没有返回值。

CSS

 #ta { width: 300px; line-height: 20px; } 

HTML

 <textarea id="ta">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque suscipit, nisl eget dapibus condimentum, ipsum felis condimentum nisi, eget luctus est tortor vitae nunc. Nam ornare dictum augue, non bibendum sapien pulvinar ut. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Cras congue congue purus, quis imperdiet tellus ornare in. Nulla facilisi. Nulla elementum posuere odio ut ultricies. Nullam tempus tincidunt elit eget posuere. Pellentesque sit amet tellus sapien. Praesent sed iaculis turpis. Nam quis nibh diam, sed mattis orci. Nullam ornare adipiscing congue. In est orci, consectetur in feugiat non, consequat vitae dui. Mauris varius dui a dolor convallis iaculis.</textarea> 

脚本

  var taLineHeight = 20; // This should match the line-height in the CSS var taHeight = ta.scrollHeight; // Get the scroll height of the textarea ta.style.height = taHeight; // This line is optional, I included it so you can more easily count the lines in an expanded textarea var numberOfLines = Math.floor(taHeight/taLineHeight); alert( "there are " + numberOfLines + " lines in the text area"); 

---

更新：感谢@Pebbl解决错误，这是获得文本内容的高度（ 演示 ）所需的代码，

 var calculateContentHeight = function( ta, scanAmount ) { var origHeight = ta.style.height, height = ta.offsetHeight, scrollHeight = ta.scrollHeight, overflow = ta.style.overflow; /// only bother if the ta is bigger than content if ( height >= scrollHeight ) { /// check that our browser supports changing dimension /// calculations mid-way through a function call... ta.style.height = (height + scanAmount) + 'px'; /// because the scrollbar can cause calculation problems ta.style.overflow = 'hidden'; /// by checking that scrollHeight has updated if ( scrollHeight < ta.scrollHeight ) { /// now try and scan the ta's height downwards /// until scrollHeight becomes larger than height while (ta.offsetHeight >= ta.scrollHeight) { ta.style.height = (height -= scanAmount)+'px'; } /// be more specific to get the exact height while (ta.offsetHeight < ta.scrollHeight) { ta.style.height = (height++)+'px'; } /// reset the ta back to it's original height ta.style.height = origHeight; /// put the overflow back ta.style.overflow = overflow; return height; } } else { return scrollHeight; } } var calculateHeight = function() { var ta = document.getElementById("ta"), style = (window.getComputedStyle) ? window.getComputedStyle(ta) : ta.currentStyle, // This will get the line-height only if it is set in the css, // otherwise it's "normal" taLineHeight = parseInt(style.lineHeight, 10), // Get the scroll height of the textarea taHeight = calculateContentHeight(ta, taLineHeight), // calculate the number of lines numberOfLines = Math.ceil(taHeight / taLineHeight); document.getElementById("lines").innerHTML = "there are " + numberOfLines + " lines in the text area"; }; calculateHeight(); if (ta.addEventListener) { ta.addEventListener("mouseup", calculateHeight, false); ta.addEventListener("keyup", calculateHeight, false); } else if (ta.attachEvent) { // IE ta.attachEvent("onmouseup", calculateHeight); ta.attachEvent("onkeyup", calculateHeight); } 

Answer 2

只有一个js线：

 var rows = document.querySelector('textarea').value.split("\n").length; 

Answer 3

您可以通过Javascript DOM访问该字段，并简单计算换行符的数量。

 oArea = document.getElementById('myTextField'); var aNewlines = oArea.value.split("\n"); var iNewlineCount = aNewlines.length(); 

Answer 4

  function countLines(area,maxlength) { // var area = document.getElementById("texta") // trim trailing return char if exists var text = area.value.replace(/\s+$/g, "") var split = text.split("\n") if (split.length > maxlength) { split = split.slice(0, maxlength); area.value = split.join('\n'); alert("You can not enter more than "+maxlength.toString()+" lines"); } return false; } 

这是一个简单而经过testing的