JavaScript - scrollHeight with rows attribute

Question

I want to get the height of the text inside a textarea. Here is the problem: the textarea has a fixed number of rows, causing the scrollHeight property to become useless in this case. See this example:

console.log(document.querySelector('textarea').scrollHeight);

<textarea rows="10">Hello, world!</textarea>

My idea was to remove the rows attribute with JavaScript, retrieve the scrollHeight, and reapply the attribute.

However, this causes jumps on the page in Safari, so it is not a solution.

Does anyone know of a property/function that return this value? Thanks in advance!

Answer 1

To be "more or less" bullet proof, solution has to consider the real computed size of your text.

const scrollOrNot = (el, nbline) => {
  const divTest = document.querySelector('#test');

  divTest.style.fontsize = el.style.fontsize;
  divTest.style.lineHeight = el.style.lineHeight;
  divTest.style.width = el.getBoundingClientRect().width + 'px';
  divTest.innerHTML = 'W';
  const h_one_line = divTest.getBoundingClientRect().height;

  divTest.innerHTML = el.value;

  if (Math.floor((divTest.getBoundingClientRect().height / h_one_line)) > nbline) {
    console.log((divTest.getBoundingClientRect().height / h_one_line));
    el.setAttribute('rows', 10);
  }

}

scrollOrNot(document.querySelector('#textarea1'),10);
scrollOrNot(document.querySelector('#textarea2'),10);

#test {
  position: absolute;
  top: -3000px;
  height: auto;
}

<textarea id="textarea1">Hello, world!</textarea>
<textarea id="textarea2">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. In egestas erat imperdiet sed euismod nisi porta lorem mollis. Turpis massa tincidunt dui ut ornare lectus. Pellentesque dignissim enim sit amet venenatis urna. In fermentum posuere urna nec tincidunt. Venenatis urna cursus eget nunc scelerisque viverra mauris in. Non quam lacus suspendisse faucibus interdum posuere lorem ipsum. Nunc id cursus metus aliquam eleifend mi in nulla. Netus et malesuada fames ac turpis egestas integer eget. Sit amet dictum sit amet justo donec enim diam. Aliquam purus sit amet luctus venenatis lectus. Ligula ullamcorper malesuada proin libero nunc. Venenatis lectus magna fringilla urna porttitor rhoncus. Faucibus interdum posuere lorem ipsum dolor. Posuere ac ut consequat semper viverra nam libero justo laoreet. Ac turpis egestas sed tempus urna et pharetra pharetra massa. Vestibulum sed arcu non odio euismod lacinia. Arcu non odio euismod lacinia at quis risus sed. Lobortis mattis aliquam faucibus purus in massa tempor nec. Enim ut sem viverra aliquet eget sit amet tellus cras.
</textarea>

<div id="test"></div>

here you have a div at -3000px, absolute.

you put same width, fontsize and line height of your textarea.

You put a 'W' in it (biggest letter for latin character)

you take it's height

you put your text in

you take the new height

if division more than requested lines...