快速了解CSS表单尺寸属性field-sizing

最近Chrome 123又推出了一个新的 CSS 属性：field-sizing。有了它，可以轻松实现输入框尺寸自动跟随输入内容的效果，花一分钟了解一下吧~5tI28资讯网——每日最新资讯28at.com

一、快速了解field-sizing

field-sizing 表示“场地”尺寸，在这里指的是表单输入框的尺寸，语法很简单，可以取两个值，如下5tI28资讯网——每日最新资讯28at.com

field-sizing: fixed | content

其中，fixed表示固定大小，也就是目前浏览器的默认行为，输入框必须要给定一个具体的尺寸5tI28资讯网——每日最新资讯28at.com

而content表示输入框的尺寸完全由输入内容决定。5tI28资讯网——每日最新资讯28at.com

举个例子，下面是一个文本域5tI28资讯网——每日最新资讯28at.com

<textarea></textarea>

默认表现是这样的5tI28资讯网——每日最新资讯28at.com

图片5tI28资讯网——每日最新资讯28at.com

可以看到，按回车时，出现了滚动条，这个大家应该再熟悉不过了5tI28资讯网——每日最新资讯28at.com

这时，如果添加以下属性5tI28资讯网——每日最新资讯28at.com

textarea{  field-sizing: content;}

结果...变成了这样5tI28资讯网——每日最新资讯28at.com

图片5tI28资讯网——每日最新资讯28at.com

因为这时没有内容，所以也就没有了尺寸，所以一般还需要手动加个尺寸5tI28资讯网——每日最新资讯28at.com

textarea{  field-sizing: content;  width： 200px;}

现在宽度固定了，高度仍然有内容决定5tI28资讯网——每日最新资讯28at.com

图片5tI28资讯网——每日最新资讯28at.com

这样就实现了一个回车自动增加高度的输入框了，是不是很方便？5tI28资讯网——每日最新资讯28at.com

还可以设置最小尺寸，这样就更符实际规需求了5tI28资讯网——每日最新资讯28at.com

textarea{  field-sizing: content;  width： 200px;  min-height: 40px;}

效果如下5tI28资讯网——每日最新资讯28at.com

图片5tI28资讯网——每日最新资讯28at.com

二、其他输入元素

除了前面的文本域textarea，input也比较实用，比如要实现一个宽度自适应内容的输入框5tI28资讯网——每日最新资讯28at.com

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

效果如下5tI28资讯网——每日最新资讯28at.com

图片5tI28资讯网——每日最新资讯28at.com

另外，select元素也是支持的5tI28资讯网——每日最新资讯28at.com

<select>  <option>HTML</option>  <option>CSS</option>  <option>JavaScript</option>  <option>这是一个很长很长的选项</option></select>

默认情况下，select元素的宽度是由最长的那一项决定的5tI28资讯网——每日最新资讯28at.com

图片5tI28资讯网——每日最新资讯28at.com

这样在比较短的选项在选中时就比较突兀，现在我们设置自适应内容尺寸5tI28资讯网——每日最新资讯28at.com

select{  field-sizing: content;}

比上面要好很多了5tI28资讯网——每日最新资讯28at.com

图片5tI28资讯网——每日最新资讯28at.com

以上几个demo可以查看以下链接（Chrome 123+）5tI28资讯网——每日最新资讯28at.com

• CSS field-sizing (juejin.cn)[1]

三、相比可编辑 div 的好处

在以往，我们通常是通过给div设置可编辑属性，来实现内容自适应5tI28资讯网——每日最新资讯28at.com

<div contenteditable="true">  </div>

虽然也能实现，但是有很多表单特性就丢失了。5tI28资讯网——每日最新资讯28at.com

1. onchange事件缺失，由于只是普通的div，所以无法监听change事件
2. value属性缺失，也就是无法通过div.value读取或者设置输入内容
3. minLength、maxLength属性缺失，无法直接设置最大最小长度
4. 表单提交信息缺失，无法通过默认的new Form(表单)来获取表单内容
5. 在 vue、react这些框架中也无法直接双向绑定等等

[1]CSS field-sizing (juejin.cn)： https://code.juejin.cn/pen/73498312041341911315tI28资讯网——每日最新资讯28at.com

本文链接：http://www.28at.com/showinfo-26-79140-0.html快速了解CSS表单尺寸属性field-sizing

声明：本网页内容旨在传播知识，若有侵权等问题请及时与本网联系，我们将在第一时间删除处理。邮件：2376512515@qq.com

上一篇： 优化代码逻辑：为什么尽量避免使用 if-else？

下一篇： itertools：用于处理可迭代对象的模块