如何获取textarea元素当前的rows和cols属性值？

在JavaScript中，textarea元素的.rows和.cols属性仅返回标签上设置的初始值，即便用户手动调整了textarea的尺寸，这两个值也不会更新。比如以下代码运行后，调整textarea大小或输入内容，输出的行列数始终是初始值：

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>

一、获取textarea当前可视的rows和cols值 #

要得到当前可视区域对应的行列数，需通过计算元素实际尺寸与单字符/行的尺寸推导，步骤如下：

1. 创建隐藏测试容器，复制textarea的字体、内边距等关键样式，确保字符尺寸一致；
2. 计算textarea的可用宽度（clientWidth减去左右内边距），除以单个字符宽度得到当前可视列数；
3. 计算textarea的可用高度（clientHeight减去上下内边距），除以单行高度得到当前可视行数。

示例代码：

function getActualDimensions(textareaEl) {
  // 创建隐藏的测试元素
  const testSpan = document.createElement('span');
  // 复制textarea的关键样式
  const computedStyle = window.getComputedStyle(textareaEl);
  testSpan.style.cssText = `
    position: absolute;
    visibility: hidden;
    white-space: pre;
    font: ${computedStyle.font};
    padding: ${computedStyle.padding};
    border: none;
  `;
  document.body.appendChild(testSpan);
  
  // 测量单个字符宽度（用'x'作为基准字符）
  testSpan.textContent = 'x';
  const charWidth = testSpan.offsetWidth;
  // 测量单行高度
  testSpan.textContent = '\n';
  const lineHeight = testSpan.offsetHeight;
  
  // 计算textarea可用空间
  const availableWidth = textareaEl.clientWidth - parseInt(computedStyle.paddingLeft) - parseInt(computedStyle.paddingRight);
  const availableHeight = textareaEl.clientHeight - parseInt(computedStyle.paddingTop) - parseInt(computedStyle.paddingBottom);
  
  // 计算可视行列数
  const actualCols = Math.floor(availableWidth / charWidth);
  const actualRows = Math.floor(availableHeight / lineHeight);
  
  // 移除测试元素
  document.body.removeChild(testSpan);
  
  return { rows: actualRows, cols: actualCols };
}

// 使用示例
function howBigAmI(){
  const el = document.getElementById("textarea");
  const { rows, cols } = getActualDimensions(el);
  document.getElementById("output").innerHTML =
    `${rows} rows by ${cols} cols, text length=${el.value.length}`;
}
howBigAmI()

二、计算宽度固定时显示全部内容所需的行数 #

如果要保持当前textarea宽度不变，计算显示所有内容需要的行数，可复用测试元素实现：

1. 创建隐藏测试元素，设置宽度与textarea一致，复制样式；
2. 将textarea内容放入测试元素，获取总高度；
3. 用总高度除以单行高度，得到所需总行数（向上取整确保内容完全显示）。

示例代码：

function getRequiredRows(textareaEl) {
  const testSpan = document.createElement('span');
  const computedStyle = window.getComputedStyle(textareaEl);
  testSpan.style.cssText = `
    position: absolute;
    visibility: hidden;
    white-space: pre-wrap;
    word-wrap: break-word;
    font: ${computedStyle.font};
    padding: ${computedStyle.padding};
    width: ${textareaEl.clientWidth}px;
    border: none;
  `;
  document.body.appendChild(testSpan);
  
  // 设置内容并获取总高度
  testSpan.textContent = textareaEl.value;
  const totalHeight = testSpan.offsetHeight;
  // 测量单行高度
  testSpan.textContent = '\n';
  const lineHeight = testSpan.offsetHeight;
  
  document.body.removeChild(testSpan);
  
  // 计算所需行数
  return Math.ceil(totalHeight / lineHeight);
}

// 整合到原函数使用
function howBigAmI(){
  const el = document.getElementById("textarea");
  const { rows, cols } = getActualDimensions(el);
  const requiredRows = getRequiredRows(el);
  document.getElementById("output").innerHTML =
    `${rows} rows by ${cols} cols, text length=${el.value.length}, required rows=${requiredRows}`;
}
howBigAmI()

内容的提问来源于stack exchange，提问作者Chris F Carroll