如何在关闭弹窗模态框时重置textarea的尺寸？

这个问题我太熟悉了！之前做项目的时候也踩过这个坑——调整textarea尺寸后，浏览器会悄悄记住它修改后的高度/宽度或者rows/cols属性，导致弹窗重新打开时直接沿用了修改后的状态，看起来就异常了。下面给你几个实用的解决办法，挑适合你项目的来用：

最直接的思路是在弹窗关闭的瞬间，把textarea的尺寸恢复成初始状态。不管你用的是原生JS写的弹窗，还是Bootstrap这类UI库的模态框，都可以监听关闭事件来执行重置逻辑。

举个Bootstrap模态框的例子：

// 监听模态框完全关闭的事件
$('#your-modal-id').on('hidden.bs.modal', function() {
  // 找到弹窗里的textarea元素
  const targetTextarea = this.querySelector('textarea');
  // 重置rows和cols为你的初始值（比如rows=5，cols=30）
  targetTextarea.rows = 5;
  targetTextarea.cols = 30;
  // 清除浏览器自动加上的内联height/width样式
  targetTextarea.style.height = '';
  targetTextarea.style.width = '';
});

如果是自定义弹窗，就在你控制弹窗隐藏的函数里，加入上面的重置代码就行。

另一种思路是每次弹窗打开时，强制textarea回到默认状态。这种方式更稳妥，不管之前有没有修改过尺寸，打开弹窗都会重置：

// 监听模态框即将打开的事件
$('#your-modal-id').on('show.bs.modal', function() {
  const targetTextarea = this.querySelector('textarea');
  // 移除所有内联样式，恢复默认
  targetTextarea.removeAttribute('style');
  // 重置rows到初始值
  targetTextarea.rows = 5;
});

如果不想写JS，也可以试试用CSS来锁定textarea的默认尺寸，注意要确保选择器优先级足够高，避免被内联样式覆盖：

/* 假设你的弹窗有.custom-modal类 */
.custom-modal textarea {
  height: auto !important;
  width: 100% !important;
  /* 也可以直接设固定高度，比如height: 160px !important; */
}

尽量少用!important，可以通过更精准的选择器提升优先级，比如.custom-modal .form-group textarea。

如果你用的是Ant Design、Element UI这类组件库，它们有更优雅的重置方式。比如React+Ant Design的场景，可以通过修改key属性强制textarea重新渲染：

import { Modal, Input } from 'antd';
import { useState } from 'react';

const MyModal = () => {
  const [visible, setVisible] = useState(false);
  const [textareaKey, setTextareaKey] = useState(Date.now());

  const openModal = () => {
    // 每次打开弹窗更新key，让组件重新创建
    setTextareaKey(Date.now());
    setVisible(true);
  };

  return (
    <>
      <button onClick={openModal}>打开弹窗</button>
      <Modal visible={visible} onCancel={() => setVisible(false)}>
        <Input.TextArea key={textareaKey} rows={5} />
      </Modal>
    </>
  );
};

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