textarea 自动撑高、input宽度自适应终于有官方方案了：field-sizing，三行 CSS 告别 JS

admin

2026年7月9日 11:31 本文热度 148

每个前端都写过 textarea 自适应高度的代码。scrollHeight 监听、composition 事件兼容、移动端 visualViewport 坑……现在不用了。field-sizing: content 6 月刚进 Baseline，浏览器全支持。

　先看效果　

textarea 输入内容自动变高。删文字自动缩回去。input 输入框宽度跟着文本走。select 下拉框自动匹配选项长度。全是一个属性。

　以前怎么写　

这块代码你大概率写过：

textarea.addEventListener('input', function() {
  this.style.height = 'auto';
  this.style.height = this.scrollHeight + 'px';
});

看着没几行。实际用起来一堆坑：

• 中文输入法 composition 事件期间高度乱跳
• 移动端键盘弹起 visualViewport 变化，scrollHeight 读数不准
• 删文字的时候缩不回去，或者缩过头
• Vue/React 里得等 nextTick 才能读到正确 DOM 值
• 初始值如果有内容，还得在 mounted 里手动调一次

网上搜到的「textarea 自适应高度」方案，基本上每个下面都有一堆评论说「不行，XX 场景下会崩」。

　现在怎么写　

textarea {
  field-sizing: content;
  min-height: 3lh;
  max-height: 400px;
  resize: none;
}

三行。输入、删除、粘贴、IME 输入，高度全自动跟着走。

• min-height: 3lh，空的时候别塌成一条线。lh 是 line-height 单位，3 行高比较自然
• max-height: 400px，内容太长别无限撑，到了上限出滚动条
• resize: none，有自动撑高了，手动拖角没意义

　不光是 textarea　

input 也能自适应宽度

input[type="text"],
input[type="email"] {
  field-sizing: content;
  min-width: 80px;
  max-width: 300px;
}

输入框宽度自动跟着文本走。用户名有多长，框就多宽，不用写死 width 猜长度。

几个要注意的：

• min-width 必须设，不然空输入框会塌成光标那么宽
• max-width 也设上，防止超长文本撑破布局
• size 属性会被忽略，field-sizing: content 接管了尺寸控制

select 也有份

select {
  field-sizing: content;
}

选「HTML」时下拉框很窄，选「React + TypeScript + Next.js」时自动变宽。不用写死最大宽度去适配所有选项。

file input 也行

选了文件名很长的时候，控件自动跟着文件名宽度变。

　兼容性　

field-sizing 2026 年 6 月 16 日进入 Baseline。Firefox 152 是最后一个支持的浏览器：

Chrome	Safari	Firefox
123+	26.2+	152+

三个浏览器全齐，生产可以直接用。

不支持的浏览器怎么办？field-sizing: content 对它们来说就是无效 CSS，表单按默认行为渲染，textarea 固定高度、input 固定宽度。体验没变差，只是不自适应而已。兜底可加可不加。

/* 兜底写法：不支持的浏览器用 min-height 保证基本可用 */
textarea {
  min-height: 80px;   /* 所有浏览器生效 */
  field-sizing: content;  /* 支持的浏览器覆盖 */
  max-height: 400px;
  resize: vertical;  /* 不支持的浏览器至少可以手动拖 */
}

@supports (field-sizing: content) {
  textarea {
    resize: none;  /* 支持的浏览器不需要拖角 */
  }
}