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

我有一个

元素。我可以使用JavaScript检测（例如）其中有10行文本吗？

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

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

---

我找到了一种更简单的方法，但是需要在CSS中设置textarea的行高。我试图读取脚本

ta.style.lineHeight

中的行高，但它似乎没有返回值

CSS

HTML

---

更新：感谢@Pebbl解决了这些bug，这是获取文本内容高度所需的代码（）

var calculateContentHeight=函数（ta，扫描量）{
var origHeight=ta.style.height，
高度=ta。离地高度，
scrollHeight=ta.scrollHeight，
溢出=ta.style.overflow；
///只在ta大于内容时才麻烦
如果（高度>=滚动高度）{
///检查浏览器是否支持更改尺寸
///在函数调用的中途进行计算。。。
ta.style.height=（高度+扫描量）+“px”；
///因为滚动条会导致计算问题
ta.style.overflow='hidden'；
///通过检查scrollHeight是否已更新
if（滚动高度=ta.scrollHeight）{
ta.style.height=（height-=扫描量）+'px'；
}
///请更具体地获得确切的高度
while（ta.offsetHeight

这是一个简单且经过测试的

仅一行：

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

---

假设您知道线的高度，最简单的方法是：

function numOfLines(textArea, lineHeight) {
    var h0 = textArea.style.height;
    ta.style.height = 'auto';
    var h1 = textArea.scrollHeight;
    textArea.style.height = h0;
    return Math.ceil(h1 / lineHeight);
}

---

这里的技巧是首先将高度设置为

auto

。然后，当您访问scrollHeight时，浏览器将进行布局并返回正确的高度，包括任何换行。然后将文本区域高度恢复为其原始值并返回结果。

您可以从中获得实际文本高度，但要获得正确的高度，必须有一个滚动，这意味着您可以临时将文本框高度设置为

0

，直到获得滚动高度值，然后恢复CSS高度

一个是根据CSS行高属性值计算行数（1行文本贡献像素），类似于

function getTextareaNumberOfLines(textarea) {
    var previous_height = textarea.style.height, lines
    textarea.style.height = 0
    lines = parseInt( textarea.scrollHeight/parseInt(getComputedStyle(textarea).lineHeight) )
    textarea.style.height = previous_height
    return lines
}

注意：您的元素必须存在于DOM中才能获得滚动高度、线条高度等。如果尚未存在，请添加它们，计算值，然后从DOM中删除它们。

简单方法：

var lines = document.querySelector("textarea").value.split(/\r\n|\r|\n/).length;

---

您可能需要澄清您的问题，这样看起来就不会试图从

textarea

元素返回

rows=

属性。为什么要这样做？我感觉到一个糟糕的需求规范。这只适用于。如果文本自动换行的唯一方法是使用固定大小的字体，请计算所有字符，然后将它们除以一行中允许的字符。假设过程中没有换行符\有人吗？！如果这是一个使换行数=换行数的选项，则可以关闭换行rows@Mask查看HPDeveloper的答案。这是一种比我更优雅的方法。@Frankie，但我不理解他的方法，它应该如何计算行数？+1，这是迄今为止最可靠的方法。注意：确保文本区域以

rows=1

开头，否则其

滚动高度可能人为地高。@Mottie
.style
对象将只返回内联样式。要获取计算值，您应该使用window.getComputedStyle

并回退到

Elm.currentStyle

，对于旧IE，除了+1:）谢谢@pebbl的输入！我把上述建议结合起来，提出了一些建议。请注意，在现代浏览器中手动调整文本区域的大小时，行数将改变以匹配调整大小的高度而不是内容。@Mottie nice one:）如果您感兴趣，我已经将一些自动调整大小的textarea逻辑与行数相结合，因此现在它应该是完全可靠的——对于大多数浏览器来说——即使ta大于内容。我的lineHeight=20，textarea height=40，当我添加文本时，calculateContentHeight返回21、41、60、80、100

（高度++）++px'

需要替换为

（++height）+px'

换行符不会明确记录换行符。确实如此。一条线的中断并不一定意味着一个错误

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

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

function numOfLines(textArea, lineHeight) {
    var h0 = textArea.style.height;
    ta.style.height = 'auto';
    var h1 = textArea.scrollHeight;
    textArea.style.height = h0;
    return Math.ceil(h1 / lineHeight);
}

function getTextareaNumberOfLines(textarea) {
    var previous_height = textarea.style.height, lines
    textarea.style.height = 0
    lines = parseInt( textarea.scrollHeight/parseInt(getComputedStyle(textarea).lineHeight) )
    textarea.style.height = previous_height
    return lines
}

var lines = document.querySelector("textarea").value.split(/\r\n|\r|\n/).length;