新的 CSS field-sizing 属性解决千古难题

引言

新的 CSS field-sizing 属性解决了文本输入框随文字自动调整大小需数百行 JavaScript 代码的难题，现在只需一行 CSS 代码即可实现。

如何使用

CSS 新增 field-sizing 属性，有两个取值：

• fixed：默认值，输入框尺寸保持不变。
• content：输入框根据内部文本长度自动调整大小。
  示例代码：

input, textarea, select {
  field-sizing: content;
}

需要牢记的重要事项

最小和最大宽度

若未设定输入框最小或最大宽度，其会缩小到只够显示光标大小，需设置 min-width 和 max-width。示例代码：

input {
  field-sizing: content;
  min-width: 100px;
  max-width: 300px;
}

文本域可双向扩展

文本域能向水平和垂直两个方向扩展，可设置最小高度确保不过于狭小。示例代码：

textarea {
  min-width: 100px;
  max-width: 300px;
  min-height: 3rem;
}

下拉框动态调整大小

默认 <select> 元素宽度由最长选项决定，使用 field-sizing: content; 后，会根据当前选中选项动态调整宽度。

支持 maxlength

设置 maxlength 后，输入框宽度只会增长到允许的最大字符长度。示例代码：

<input type="text" maxlength="10">

真实示例

用户填写个人简介区域，使用 field-sizing: content; 后，textarea 会随输入内容增多自动扩展，提升输入体验。示例代码：

textarea {
  field-sizing: content;
  min-height: 3rem;
  max-width: 100%;
}

使用 field-sizing 的优点

• 无需 JavaScript，减少代码量和问题。
• 提升用户体验，避免狭小输入框和滚动条。
• 支持占位符，输入框会根据占位符文本自动调整大小。
• 下拉框动态调整宽度。
• 渐进增强，浏览器不支持时输入框正常表现。

该特性缺点

• 浏览器支持有限，仅基于 Chromium 的浏览器可用。
• 暂不支持 Firefox 和 Safari。
• 并非总是有用，多用于 textarea 或特定场景。
• 未设置最小或最大宽度时，可能出现怪异效果。

总结

CSS 的 field-sizing 属性是输入框领域的革命性改进，开发者可少加班，值得一试。

效果

使用前：
使用后：