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

Posted 2023-05-07

【中文标题】如何使用 JavaScript 获取 <textarea > 中的行数？

【英文标题】：How to get number of rows in <textarea > using JavaScript?

【发布时间】：2010-12-18 03:40:16

【问题描述】：

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

【问题讨论】：

您可能想澄清您的问题，这样您看起来就不会尝试从textarea 元素返回rows= 属性。

您为什么要这样做？我感觉到一个糟糕的需求规范。

【参考方案1】：

我找到了一种更简单的方法来做到这一点，但是您需要在 CSS 中设置 textarea 的 line-height。我试图读取脚本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 解决错误，这是获取文本内容高度所需的代码 (demo)

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

【讨论】：

+1，这是迄今为止最可靠的方法。注意事项：确保 textarea 以 rows=1 开头，否则其 scrollHeight 可能会被人为设置高。

@Mottie .style 对象只会返回内联样式。要获得计算值，您应该使用 window.getComputedStyle 并为旧 IE 回退到 Elm.currentStyle。除了 +1 :)

感谢@pebbl 的输入！我结合了上述建议并制作了a demo。请注意，当您在现代浏览器中手动调整 textarea 的大小时，行数将更改以匹配调整后的高度而不是内容。

@Mottie 不错的一个 :) 如果您有兴趣，我已经将一些自动调整大小的 textarea 逻辑与您的行数相结合，所以现在它应该是完整的——对于大多数浏览器来说——即使ta 大于内容。 jsfiddle.net/PfD7L/1

我有 lineHeight=20 和 textarea height=40，当我添加文本时，calculateContentHeight 返回 21、41、60、80、100。(height++)+'px' 需要替换为 (++height)+'px'

【参考方案2】：

只有一行js：

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

【讨论】：

我遇到了这个问题，具体取决于操作系统。特别是 \r、\r\n、\n\r 和 \n 之间的区别。我不记得确切的原因，但实际上很难以这种方式详尽地做到这一点。

如果有几行不是因为换行符而是因为一行溢出到下一行怎么办？

@intcreator 然后使用wrap="off" 属性

【参考方案3】：

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

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 时，浏览器将进行布局并返回正确的高度，包括任何换行。然后将textarea高度恢复到原来的值并返回结果。

【参考方案4】：

你可以从Element.scrollHeight得到实际的文字高度，但是要得到正确的高度，必须要有一个滚动条，也就是说你可以暂时将文本框高度设置为0，直到得到滚动条高度值，然后恢复 CSS 高度。

你有一个，你根据 CSS line-height 属性值计算行数（1 行文本贡献getComputedStyle(ref).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

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

【讨论】：

确保line-height css 属性是一个数值（即不是normal 或类似字符串）

【参考方案5】：

    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;
    

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

【讨论】：

换行符并不能明确指出换行符。

当然可以。然而，换行并不一定意味着换行。

【参考方案6】：

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

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

【讨论】：

这仅适用于 。如果文本自动换行，唯一的方法是使用固定大小的字体，计算所有字符，然后将它们除以一行中允许的字符。并且假设过程中没有换行符... \n 有人吗？！

如果这是一个使换行数=行数的选项，您可以关闭换行

@Mask 查看 phpdeveloper 的答案。这是一种比我更优雅的方法。

@Frankie ，但我不明白他的方法，它应该如何计算行？

【参考方案7】：

简单的方法：

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