如何防止可自适应增高的居中TextArea溢出页面？

我来帮你搞定这个需求！咱们一步步来实现这个兼顾居中布局、内容自适应高度，还能让用户点击周边区域就获得焦点的TextArea：

核心思路拆解 #

• 水平垂直居中：用Flexbox布局最省心，外围容器设为flex容器，直接让内部TextArea居中
• 自适应高度：监听TextArea的输入事件，通过scrollHeight动态调整它的高度，避免设置100%高破坏垂直居中
• 外围点击获焦：给外围容器绑定点击事件，触发TextArea的focus()方法，同时要排除TextArea自身的点击事件，避免重复触发

完整代码实现 #

HTML结构 #

<div class="textarea-container">
  <textarea class="auto-grow-textarea" placeholder="输入内容试试..."></textarea>
</div>

CSS样式 #

/* 外围容器：作为点击捕获区域，同时实现居中 */
.textarea-container {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100vw;
  height: 100vh;
  background-color: #eee; /* 调试用灰色背景 */
}

/* TextArea基础样式 */
.auto-grow-textarea {
  width: 80%; /* 自定义宽度，避免太宽 */
  min-height: 60px; /* 初始最小高度 */
  padding: 12px;
  border: 1px solid #ccc;
  border-radius: 4px;
  resize: none; /* 禁用默认拖拽调整，用自适应逻辑替代 */
  font-size: 16px;
}

JavaScript逻辑 #

const textarea = document.querySelector('.auto-grow-textarea');
const container = document.querySelector('.textarea-container');

// 自适应高度函数
function adjustTextareaHeight() {
  // 先重置高度为auto，避免scrollHeight计算偏差
  textarea.style.height = 'auto';
  // 设置高度为scrollHeight（内容实际高度），减去内边距避免滚动条
  textarea.style.height = `${textarea.scrollHeight}px`;
}

// 监听输入事件，实时调整高度
textarea.addEventListener('input', adjustTextareaHeight);

// 外围容器点击事件：让TextArea获焦
container.addEventListener('click', (e) => {
  // 点击的不是TextArea本身时才触发
  if (e.target !== textarea) {
    textarea.focus();
  }
});

// 页面加载时初始化高度
adjustTextareaHeight();

关键细节说明 #

1. Flex布局居中：textarea-container通过display: flex+justify-content: center+align-items: center实现全屏居中，同时它的宽高设为100vw/100vh，确保点击区域覆盖整个页面
2. 自适应高度原理：每次输入时先把TextArea高度重置为auto，再用scrollHeight获取内容的实际高度，这样能准确匹配内容高度，不会出现滚动条
3. 点击捕获优化：通过判断点击目标是不是TextArea本身，避免用户点击TextArea时重复触发focus，提升交互体验
4. 调试背景：容器的灰色背景可以在开发阶段直观看到点击区域，上线前可以去掉或者改成透明

额外优化建议 #

• 可以给TextArea添加过渡动画，比如transition: height 0.2s ease，让高度变化更平滑
• 限制最大高度，比如max-height: 400px，超过后显示滚动条，避免内容过多撑满屏幕
• 支持回车换行的自适应，上面的逻辑已经覆盖了，因为scrollHeight会计算换行后的高度

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