该代码通过先重置 textarea 高度为极小值（如 ‘5px’），再设为 scrollheight，强制触发浏览器重新计算内容高度，从而实现无滚动条的自适应伸缩。

在 Web 开发中，让 根据输入内容自动伸缩（即“自适应高度”）是一个常见需求。上面这段 React 代码正是实现该功能的核心逻辑：

 {
    event.target.style.height = '5px'; // 步骤①：临时重置高度
    event.target.style.height = event.target.scrollHeight + 'px'; // 步骤②：设为实际内容所需高度
  }}
/></pre>
<p><strong><a style="color:#f60; text-decoration:underline;" title="为什么" href="https://www.php.cn/zt/92702.html" target="_blank">为什么</a>需要两步？关键在于浏览器的渲染机制：</strong><br />scrollHeight 返回的是元素内容的<strong>完整高度</strong>（包括溢出部分），但它依赖于当前元素的<strong>已计算样式</strong>（computed style）。如果 textarea 当前已有较大高度（例如因之前输入而撑开），浏览器可能缓存了布局信息，直接赋值 scrollHeight 可能无法触发准确重测量——尤其当内容变少、行数减少时，scrollHeight 值可能未及时更新。</p>
<p>✅ <strong>第一步 event.target.style.height = ‘5px’</strong>：<br />
将内联 height 强制设为一个极小值（远小于默认行高），迫使浏览器“忘记”之前的尺寸假设，清空高度缓存，并立即触发布局重排（reflow）。此时 textarea 高度被压缩，内容开始溢出，scrollHeight 便能真实反映当前文本所需的最小高度。</p>
<p>✅ <strong>第二步 event.target.style.height = event.target.scrollHeight + ‘px’</strong>：<br />
在重排后立即读取更新后的 scrollHeight（此时已准确包含换行、字体、行高、padding 等影响），再将 height 设为该值，使 textarea 刚好包裹全部内容，不留空白也不出现滚动条。</p>
<p>⚠️ 注意事项：</p>
<div class="aritcle_card flexRow">
<div class="artcardd flexRow">
								<a class="aritcle_card_img" href="https://www.php.cn/xiazai/code/9444" title="毕节热线企业建站系统5.1"><img
										src="https://img.php.cn/upload/webcode/000/000/018/175898160515922.jpg" alt="毕节热线企业建站系统5.1"></a></p>
<div class="aritcle_card_info flexColumn">
									<a href="https://www.php.cn/xiazai/code/9444" title="毕节热线企业建站系统5.1">毕节热线企业建站系统5.1</a></p>
<p>毕节热线企业建站系统拥有一下系统功能，且具备完整后台，功能没有限制。一、公司介绍系统：将您的公司展现给广大用户，提高企业知名度。二、内容管理系统：可以发布新闻、公司动态等内容。三、产品展示系统：展示产品，同时提供在线订购功能。四、人才招聘系统：发布公司招聘信息，同时提供在线应聘功能。五、留言系统。六、投票系统。本次更新修改内容：1.在后台增加网站关键字和网站描述功能。2.网站前台栏目全部采用调用I</p>
</p></div>
<p>								<a href="https://www.php.cn/xiazai/code/9444" title="毕节热线企业建站系统5.1" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a>
							</div>
</p></div>
<ul>
<li>必须使用 onInput（而非 onChange），以实时响应每一次输入（包括粘贴、删除、回车等）；</li>
<li>scrollHeight 包含 padding（但不含 border 或 margin），因此建议 textarea 的 box-sizing 保持默认 content-box，或统一设为 border-box 并确保 padding 值稳定；</li>
<li>若需兼容 Safari 等对 scrollHeight 计算稍滞后的浏览器，可加微小延迟（不推荐）或配合 offsetHeight 校验，但多数场景下双步法已足够鲁棒；</li>
<li>实际项目中建议封装为自定义 Hook（如 useAutosizeTextarea），并添加最小/最大高度限制、防抖（避免高频触发）、以及初始渲染适配等健壮性处理。</li>
</ul>
<p>总结：这不是“多此一举”，而是巧妙利用浏览器渲染流水线特性——用一次“收缩”换取一次精准“伸展”，是<a style="color:#f60; text-decoration:underline;" title="前端" href="https://www.php.cn/zt/15813.html" target="_blank">前端</a>实现平滑自适应 textarea 的经典实践。</p>
<p><a href="https://www.php.cn/faq/2014812.html">https://www.php.cn/faq/2014812.html</a></p>
		</div><!-- .entry-excerpt -->
	</div>		</div>
	</article>
	<!-- #post-52585 -->
	<link rel='stylesheet' id='hopeui-comments-css' href='https://blog.wuxhqi.com/wp-content/themes/hopeui/assets/css/comments.min.css?ver=1.1.2' type='text/css' media='all' />
<div id="comments" class="comments-area">
		<div id="respond" class="comment-respond">
		<h3 id="reply-title" class="comment-reply-title">发表回复 <small><a rel="nofollow" id="cancel-comment-reply-link" href="/%e5%8a%a8%e6%80%81%e8%b0%83%e6%95%b4-textarea-%e9%ab%98%e5%ba%a6%e7%9a%84%e5%8e%9f%e7%90%86%e4%b8%8e%e5%ae%9e%e7%8e%b0/#respond" style="display:none;">取消回复</a></small></h3><form action="https://blog.wuxhqi.com/wp-comments-post.php" method="post" id="commentform" class="comment-form">Your email address will not be published. Required fields are marked *<div class="comment-form-comment">
								<textarea id="comment" name="comment" placeholder="Comment" required="required">