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

开发 前端
field-sizing 表示“场地”尺寸,在这里指的是表单输入框的尺寸,语法很简单,可以取两个值,其中,fixed表示固定大小,也就是目前浏览器的默认行为,输入框必须要给定一个具体的尺寸,而content表示输入框的尺寸完全由输入内容决定。

最近Chrome 123又推出了一个新的 CSS 属性:field-sizing。有了它,可以轻松实现输入框尺寸自动跟随输入内容的效果,花一分钟了解一下吧~

一、快速了解field-sizing

field-sizing 表示“场地”尺寸,在这里指的是表单输入框的尺寸,语法很简单,可以取两个值,如下

field-sizing: fixed | content

其中,fixed表示固定大小,也就是目前浏览器的默认行为,输入框必须要给定一个具体的尺寸

而content表示输入框的尺寸完全由输入内容决定。

举个例子,下面是一个文本域

<textarea></textarea>

默认表现是这样的

图片图片

可以看到,按回车时,出现了滚动条,这个大家应该再熟悉不过了

这时,如果添加以下属性

textarea{
  field-sizing: content;
}

结果...变成了这样

图片图片

因为这时没有内容,所以也就没有了尺寸,所以一般还需要手动加个尺寸

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

现在宽度固定了,高度仍然有内容决定

图片图片

这样就实现了一个回车自动增加高度的输入框了,是不是很方便?

还可以设置最小尺寸,这样就更符实际规需求了

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

效果如下

图片图片

二、其他输入元素

除了前面的文本域textarea,input也比较实用,比如要实现一个宽度自适应内容的输入框

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

效果如下

图片图片

另外,select元素也是支持的

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

默认情况下,select元素的宽度是由最长的那一项决定的

图片图片

这样在比较短的选项在选中时就比较突兀,现在我们设置自适应内容尺寸

select{
  field-sizing: content;
}

比上面要好很多了

图片图片

以上几个demo可以查看以下链接(Chrome 123+)

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

三、相比可编辑 div 的好处

在以往,我们通常是通过给div设置可编辑属性,来实现内容自适应

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

虽然也能实现,但是有很多表单特性就丢失了。

  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/7349831204134191131

责任编辑:武晓燕 来源: 前端侦探
相关推荐

2010-08-25 14:36:35

CSSheightwidth

2023-11-06 09:24:14

CSS相对颜色

2023-11-20 09:27:28

CSS前端

2022-10-10 18:38:56

inert属性键盘

2024-07-24 10:58:32

2023-12-19 16:39:18

CSS开发前端

2010-09-13 13:44:35

CSS表格CSS表单

2023-08-01 14:34:12

HTMLCSS

2023-06-28 15:04:59

CSSHTML

2022-03-04 09:31:41

CSS前端属性选择器

2023-07-11 07:53:51

CSS效果图像

2015-07-07 10:20:47

WebCSS框架

2015-08-26 16:17:49

OpenStack OpenStack 架开源云平台

2023-04-23 09:01:43

CSS动画合成

2023-04-24 09:23:31

CSS动画合成

2010-08-25 15:34:48

CSSoverflow

2010-09-07 15:31:21

DIV CSS表单

2020-09-21 09:53:04

FlexCSS开发

2009-12-24 15:00:42

DataAdapter

2009-11-17 09:47:54

Oracle SQL语
点赞
收藏

51CTO技术栈公众号