Html Question posted in
Some basic documentation can be found here.

Html – How can I read the current value of textarea.rows and cols?

I expected the .rows and .cols property of a textarea element in javascript to tell me the current values, but they don’t, they seem to tell me just the initial markup attribute values, even after the textarea is resized.

function howBigAmI(){
  let el= document.getElementById("textarea")
  
    document.getElementById("output").innerHTML=
    `${el.rows} rows by ${el.cols} cols, text length=${el.value.length}`  
    
}
howBigAmI()
<p>
How can I read the current textarea rows and cols?
</p>
<textarea oninput="javascript:howBigAmI()" id="textarea">
how big am I?
</textarea>
<div id="output">size</div>

How can I get the current values?

(lineHeight property can’t be relied on unless I explicitly set it, so that’s not a solution.)

(I want to calculate how many rows are needed to show all of the textarea’s current content, if the width remains unchanged. But I don’t want to have to set either of the properties to be able to do the calculation.)

Tags:

2

Answers


  1. 0

    Can the "needed height" be in pixels, or you absolutely need it in "row units"?

    If pixels are an option, use el.scrollHeight, like this:

    function howBigAmI(){
    let el= document.getElementById("textarea")
    document.getElementById("output").innerHTML = 'textarea should be ' + el.scrollHeight + ' pixels high to fit all the content';
}
    Login or Signup to reply.
  2. 0

    Perhaps there is a better option, but I still think that line-height' should be used as a starting point. To do this, you need to calculate it in the current `:

    const getTextareaLineHeight = textarea => {
  const computedStyle = getComputedStyle(textarea);

  const tempElement = document.createElement('textarea');
  tempElement.rows = 1;
  tempElement.style.font = computedStyle.font;
  tempElement.style.lineHeight = computedStyle.lineHeight;
  tempElement.style.position = 'absolute';
  tempElement.style.visibility = 'hidden';
  tempElement.textContent = 'X';

  document.body.appendChild(tempElement);
  const lineHeight = getRealTextareaHeight(
    tempElement.offsetHeight,
    computedStyle,
  );
  document.body.removeChild(tempElement);
  return lineHeight;
};

const getRealTextareaHeight = (textareaHeight, computedStyle) => {
  return (
    textareaHeight -
    parseInt(computedStyle.paddingTop) -
    parseInt(computedStyle.paddingBottom) -
    parseInt(computedStyle.borderTopWidth) -
    parseInt(computedStyle.borderBottomWidth)
  );
};

const getRows = textarea => {
  const computedStyle = getComputedStyle(textarea);
  const height = getRealTextareaHeight(textarea.scrollHeight, computedStyle);
  return Math.floor(height / getTextareaLineHeight(textarea));
};

output.textContent = getRows(textarea);

textarea.addEventListener('input', function () {
  output.textContent = getRows(this);
});
    <p>
How can I read the current textarea rows and cols?
</p>
<textarea id="textarea" >
how big am I?
</textarea>
<div id="output"></div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search