移动端适配：如何将textarea的rows属性从6改为3（屏幕<767px）

要实现屏幕宽度小于767px时修改textarea的rows属性，你可以用JavaScript监听窗口尺寸变化，动态调整属性值，这比直接修改高度更贴合你的需求。

方法一：基础JavaScript实现 #

const messageTextarea = document.querySelector('.js-message');

// 定义调整rows的函数
function adjustTextareaRows() {
  if (window.innerWidth < 767) {
    messageTextarea.setAttribute('rows', '3');
  } else {
    messageTextarea.setAttribute('rows', '6');
  }
}

// 初始化时执行一次，适配当前屏幕尺寸
adjustTextareaRows();

// 监听窗口 resize 事件，实时调整
window.addEventListener('resize', adjustTextareaRows);

方法二：防抖优化（避免频繁触发） #

如果担心窗口拖拽 resize 时函数频繁执行影响性能，可以添加防抖处理：

const messageTextarea = document.querySelector('.js-message');
let resizeTimeout;

function adjustTextareaRows() {
  clearTimeout(resizeTimeout);
  resizeTimeout = setTimeout(() => {
    messageTextarea.setAttribute('rows', window.innerWidth < 767 ? '3' : '6');
  }, 100);
}

adjustTextareaRows();
window.addEventListener('resize', adjustTextareaRows);

补充说明 #

• 两种方法都会直接修改textarea的rowsHTML属性，完全匹配你的需求，不会通过CSS修改高度来模拟行数变化。
• 初始化执行函数是为了确保页面加载完成后，立即适配当前屏幕的尺寸状态。

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