在前端开发中，我们经常需要使用文本框来收集用户输入的信息。一种常见需求是让文本框随着用户输入的内容而自适应高度。本文将介绍如何使用 CSS 实现这个功能。
HTML 结构
首先，我们需要一个标准的 HTML textarea 元素。例如：
--------- ----------------------------
CSS 样式
接下来，我们需要编写 CSS 样式以使文本框自适应高度。我们可以使用 min-height 属性指定文本框最小高度，同时使用 height 属性设置默认高度：
------------ - ----------- ----- ------- ----- -
为了实现自适应高度，我们还需要使用 overflow-y 属性将文本框的垂直滚动条隐藏掉。另外，我们需要使用 resize 属性禁用用户手动调整文本框大小的功能：
------------ - ----------- ----- ------- ----- ----------- ------- ------- ----- -
最后，我们使用 height 属性和 scrollHeight 属性结合起来计算出文本框的自适应高度。具体实现如下：
------------ - ----------- ----- ------- ----- ----------- ------- ------- ----- - ------------------------ - ------- ----- - ------------------ - ------- -------- - --- - -------------------- - ------------------------- - -------- ---- - ------------------------------- - ------ ---- - ------------------------------------- - ----------------- -------- -
JavaScript 代码
最后，我们需要编写 JavaScript 代码来实现文本框自适应高度。具体实现如下：
----- -------- - --------------------------------------- ----- ---------- - ------------------------------------------------ ---------------------------------- -- -- - --------------------- - ------- --------------------- - -------------------------------- - --- - ------------------ ---
结论
通过以上步骤，我们可以实现一个自适应高度的文本框。用户在输入内容时，文本框会自动扩展以适应输入内容的高度。
此外，我们还可以使用 CSS 动画效果来使文本框的高度变化更加平滑。如果你想让你的网站看起来更加专业，这个小技巧一定会让你的用户感到惊喜！
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/27322