How to get number of rows in <textarea >?

Question

With javascript,is it possible?

EDIT

let me be more specific.

I mean:the exact number of rows in a textarea.

Here it's 10 rows in my post.

Anyone knows?

Answer 1

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

Answer 2

Well, cracking out from an autogrow function:

// usage
var tarea = document.getElementsByTagName('textarea')[0];
tarea.onkeyup = autogrow;
autogrow.call(tarea); // only include this if the textarea is going to have text in it from the beginning (i.e. before the user types anything in)

// the function
function autogrow() {
  if (!this.clone) {
    this.clone = document.createElement('textarea');
    this.clone.rows = this.rows;
    this.clone.style.overflow = 'auto';
    this.clone.style.visibility = 'hidden';
    this.style.width = this.clone.style.width = this.scrollWidth + 'px';
    this.clone.style.position = 'absolute';
    this.parentNode.insertBefore(this.clone, null);
    this.rows += 1;
  }
  this.clone.value = this.value;
  while (this.clone.scrollWidth < this.scrollWidth) {
    this.rows += 1;
    this.clone.rows += 1;
  }
}

Source: http://www.sitepoint.com/forums/showthread.php?t=642822

To get the row attribute:

var tarea = document.getElementsByTagName('textarea')[0];
tarea.onkeyup = autogrow;
autogrow.call(tarea);

// the function
function autogrow() {
  if (!this.clone) {
    this.clone = document.createElement('textarea');
    this.clone.rows = this.rows;
    this.clone.style.overflow = 'auto';
    this.clone.style.visibility = 'hidden';
    this.style.width = this.clone.style.width = this.scrollWidth + 'px';
    this.clone.style.position = 'absolute';
    this.parentNode.insertBefore(this.clone, null);
  }
  this.clone.value = this.value;
  var orirow = this.rows;
  while (this.clone.scrollWidth < this.scrollWidth) {
    this.rows += 1;
    this.clone.rows += 1;
  }
  // get the value from this.clone.rows
  this.rows = orirow; // set back the rows
}

Answer 3

Well I found a much simplier way to do this, but you'll need to set the line-height of the textarea in the CSS. I tried to read the line height inside the script ta.style.lineHeight but it doesn't seem to return a value.

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>

Script

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