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