Stack Overflow
Stack Overflow

How to get number of rows in and it's parent element visible in the page, this should be the prerequisite condition one might get stuck like me. Reference: https://stackoverflow.com/questions/14231481/read-scrollheight-of-div-with-a-displaynone-parent – mike652638 Jun 22 '22 at 08:25

7

You can get the actual text height from Element.scrollHeight, but to get the correct height, there has to be a scroll, which means you can temporarily set the text box height to 0, until you get the scroll height value then restore back the CSS height.

One you have that, you calculate the number of lines based on the CSS line-height property value (1 line of text contributes to getComputedStyle(ref).lineHeight pixels), something like...

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
}

Note: your elements must be present in the DOM in order to get the scrollHeight, lineHeight heights etc. If not already present, add them, calculate the values, then remove them from the DOM.

Ismail
  • 725
  • 8
  • 23
  • Make sure `line-height` css property is a numeric value (i.e not `normal` or similar strings) – Ismail Oct 30 '21 at 17:22
6

Assuming you know the line-height, the simplest way to do this would be:

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

The trick here is to set the height to auto first. Then when you access scrollHeight the browser will do the layout and return the correct height including any line wraps. Then restore the textarea height to its original value and return the result.

goblin
  • 61
  • 1
  • 1
5

Just one js line:

var rows = document.querySelector('textarea').value.split("\n").length;
Ionut Bajescu
  • 1,243
  • 1
  • 11
  • 9
  • 1
    I've run into problems with this one, depending on the OS. In particular the difference between \r, \r\n, \n\r, and \n. I don't remember exactly why, but it was actually quite difficult to exhaustively do it this way. – mike Sep 14 '15 at 20:28
  • 37
    What if there are several lines not because of newline characters but because one line overflows to the next line? – intcreator Jun 14 '17 at 06:47
  • @intcreator then use `wrap="off"` property – Nikos Mar 12 '21 at 17:34
0

You can access the field via Javascript DOM and simply count the number of newline characters.

oArea = document.getElementById('myTextField');
var aNewlines = oArea.value.split("\n");
var iNewlineCount = aNewlines.length();
webguydan
  • 420
  • 3
  • 10
  • 5
    This will only work for . If the text auto-wraps the only way to do it is to use a fixed-size font, count all chars and then divide them by the allowed chars in a row. And that assuming there are no newlines in the process... \n anyone?! – Frankie Nov 19 '09 at 03:25
  • You could turn wrapping off if that is an option which would make the number of newlines = number of rows – John Scipione Nov 19 '09 at 03:36
  • @Mask look into thephpdeveloper answer. It's a more elegant approach than mine. – Frankie Nov 19 '09 at 03:37
  • @Frankie ,but I don't understand his approach,how is it supposed to calculate the rows? – Mask Nov 19 '09 at 03:42
0
    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;
    }

this is a simple and tested one

animuson
  • 53,861
  • 28
  • 137
  • 147
anoop
  • 17
  • 1
0

The simple way:

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