如何为textarea设置最小和最大行数并通过JavaScript控制

基础配置（HTML+CSS） #

首先在HTML中给目标textarea设置初始rows属性（对应最小行数）：

<textarea id="demoTextarea" rows="3"></textarea>

搭配CSS做基础高度限制，避免异常拉伸：

#demoTextarea {
  box-sizing: border-box;
  line-height: 1.5; /* 固定行高方便计算 */
  min-height: calc(1.5em * 3); /* 和最小行数对应 */
  max-height: calc(1.5em * 10); /* 和最大行数对应 */
  overflow-y: auto; /* 超过最大行数后显示滚动条 */
  /* 不需要用户手动拖动调整大小可以加下一行 */
  /* resize: none; */
}

JavaScript控制逻辑 #

核心逻辑是监听textarea的内容变更事件，动态计算所需行数并在最小/最大值区间内调整rows属性：

const textarea = document.getElementById('demoTextarea');
// 自定义最小、最大行数
const MIN_ROWS = 3;
const MAX_ROWS = 10;

// 预计算样式参数，避免每次事件触发重复查询
const computedStyle = window.getComputedStyle(textarea);
const lineHeight = parseFloat(computedStyle.lineHeight);
const paddingTop = parseFloat(computedStyle.paddingTop);
const paddingBottom = parseFloat(computedStyle.paddingBottom);

textarea.addEventListener('input', function() {
  // 先重置高度为auto，获取内容实际需要的高度
  this.style.height = 'auto';
  // 计算内容实际所需行数
  const contentHeight = this.scrollHeight - paddingTop - paddingBottom;
  const requiredRows = Math.round(contentHeight / lineHeight);

  // 按区间调整rows属性
  if (requiredRows >= MIN_ROWS && requiredRows <= MAX_ROWS) {
    this.rows = requiredRows;
  } else if (requiredRows < MIN_ROWS) {
    this.rows = MIN_ROWS;
  }
  // 超过最大行数时不调整，由CSS的max-height限制高度并显示滚动条
});

注意事项 #

• 如果textarea的行高会动态变化，建议在初始化和窗口resize事件中重新计算lineHeight取值
• 该实现基于原生JS，无需引入任何第三方依赖
• 覆盖所有内容变更场景：手动输入、换行、粘贴内容等都会触发input事件执行逻辑

内容的提问来源于stack exchange，提问作者Dominykas Bubnys