如何让用户选择textarea显示的行数 [HTML] [JAVASCRIPT?]

这个需求实现起来很直观，核心就是监听数字输入框的变化，动态修改textarea的rows属性（用原生属性比纯CSS调整高度更贴合控件原生行为）。我给你写个完整的可运行示例，你直接就能用：

实现步骤与代码 #

1. 基础HTML结构 #

先搭好界面：一个带范围限制的数字输入框，搭配对应的提示文本，再放一个textarea控件：

<div style="margin: 10px 0;">
  <label for="rowPicker">选择显示行数：</label>
  <input 
    type="number" 
    id="rowPicker" 
    min="1" 
    max="20" 
    value="5"
    style="width: 80px; padding: 4px;"
  >
</div>
<textarea 
  id="textBox" 
  rows="5" 
  style="width: 100%; padding: 8px; box-sizing: border-box;"
  placeholder="在这里输入或查看文本..."
></textarea>

• type="number"确保输入框只接受数字，min和max用来限制行数范围（你可以根据需求自行调整）
• 初始value和textarea的rows设为一致，保证默认状态统一

2. JavaScript核心逻辑 #

接下来写监听逻辑，让输入框的数值和textarea的行数实时同步：

// 获取DOM元素
const rowPicker = document.getElementById('rowPicker');
const textBox = document.getElementById('textBox');

// 监听输入框的实时变化（包括输入、点击上下箭头）
rowPicker.addEventListener('input', function() {
  // 确保拿到的是有效数字，无效值默认 fallback 到1行
  const targetRows = parseInt(this.value) || 1;
  // 同步到textarea的rows属性
  textBox.rows = targetRows;
});

3. 体验优化（可选） #

如果想让交互更严谨，可以加个失焦修正：当输入框失去焦点时，自动把超出范围的数值修正到边界值，避免无效值残留：

rowPicker.addEventListener('blur', function() {
  let currentValue = parseInt(this.value);
  const minRows = parseInt(this.min);
  const maxRows = parseInt(this.max);
  
  // 修正超出范围的数值
  if (currentValue < minRows) {
    currentValue = minRows;
  } else if (currentValue > maxRows) {
    currentValue = maxRows;
  }
  
  // 同步修正后的值到输入框和textarea
  this.value = currentValue;
  textBox.rows = currentValue;
});

效果说明 #

当你在数字输入框输入数值、点击上下箭头调整时，textarea的显示行数会实时跟着变化。如果输入了非数字内容，会自动 fallback 到1行；失去焦点时如果数值超出min/max范围，会自动修正到边界值，体验更流畅。

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