如何使用 HTML 实现输入框的自动伸缩和换行效果？

在网页开发中，默认的<input>标签是单行输入框，既不支持换行，也无法根据输入内容自动调整高度，无法满足长文本输入的需求。要实现输入框自动伸缩和换行效果，通常有两类可行方案。

方案一：使用 textarea 配合 JS 实现自动伸缩

textarea 本身是支持换行的多行输入框，只需要配合少量 JS 代码，就能实现高度随内容自动调整的效果，是兼容性最好的实现方式。

基础 HTML 结构

首先定义 textarea 元素，设置初始行数和基础样式，禁止手动拖拽调整大小：

<style>
.auto-textarea {
    width: 300px;
    min-height: 40px;
    padding: 8px;
    box-sizing: border-box;
    resize: none; /* 禁止手动拖拽调整大小 */
    overflow: hidden; /* 隐藏滚动条 */
    font-size: 14px;
    line-height: 20px;
}
</style>
<textarea class="auto-textarea" rows="1" placeholder="请输入内容"></textarea>

JS 自适应逻辑

监听 textarea 的输入事件，每次输入后将其高度重置为自适应高度，根据内容滚动高度调整元素高度：

// 获取textarea元素
const textarea = document.querySelector('.auto-textarea');
// 监听输入事件
textarea.addEventListener('input', function() {
    // 先将高度重置为auto，避免之前的高度影响计算
    this.style.height = 'auto';
    // 设置高度为内容的滚动高度，实现自适应
    this.style.height = this.scrollHeight + 'px';
});

这种方式兼容所有主流浏览器，textarea 自带的换行功能支持回车键直接换行，不需要额外处理换行逻辑。

方案二：使用 contenteditable div 实现效果

如果需要更灵活的内容编辑能力，也可以使用设置了contenteditable="true"的div元素模拟输入框，同样支持换行和自动伸缩。

基础 HTML 结构

定义可编辑的div，设置输入框的基础样式，模拟输入框的默认外观：

<style>
.editable-div {
    width: 300px;
    min-height: 40px;
    padding: 8px;
    box-sizing: border-box;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 14px;
    line-height: 20px;
    outline: none;
}
.editable-div:empty::before {
    content: attr(placeholder);
    color: #999;
}
</style>
<div class="editable-div" contenteditable="true" placeholder="请输入内容"></div>

可编辑div本身就会根据内容自动撑开高度，同时按下回车键默认就会换行，不需要额外写JS调整高度的逻辑。如果需要在换行时调整行高或者处理其他自定义逻辑，也可以监听输入事件做额外处理。

两种方案对比

以下是两种方案的适用场景和特性对比：

注意事项

• 使用 textarea 方案时，如果页面初始加载时 textarea 有默认内容，需要在页面加载完成后手动触发一次高度计算逻辑，避免内容溢出。
• 可编辑div获取输入内容时，需要使用element.innerHTML或者element.textContent，如果需要纯文本可以用textContent，需要保留格式用innerHTML。
• 两种方案都可以通过设置max-height属性限制输入框的最大高度，超出后显示滚动条，避免输入框过高影响页面布局。

根据实际开发需求选择合适的方案即可，普通表单场景优先选择 textarea 方案，更稳定且实现成本低。

HTML自动伸缩输入框换行输入框contenteditabletext_area修改时间：2026-06-17 19:24:30