最近Chrome 123又推出了一個新的 CSS 屬性：field-sizing。有了它，可以輕松實現(xiàn)輸入框尺寸自動跟隨輸入內容的效果，花一分鐘了解一下吧~CcO28資訊網(wǎng)——每日最新資訊28at.com

一、快速了解field-sizing

field-sizing 表示“場地”尺寸，在這里指的是表單輸入框的尺寸，語法很簡單，可以取兩個值，如下CcO28資訊網(wǎng)——每日最新資訊28at.com

field-sizing: fixed | content

其中，fixed表示固定大小，也就是目前瀏覽器的默認行為，輸入框必須要給定一個具體的尺寸CcO28資訊網(wǎng)——每日最新資訊28at.com

而content表示輸入框的尺寸完全由輸入內容決定。CcO28資訊網(wǎng)——每日最新資訊28at.com

舉個例子，下面是一個文本域CcO28資訊網(wǎng)——每日最新資訊28at.com

<textarea></textarea>

默認表現(xiàn)是這樣的CcO28資訊網(wǎng)——每日最新資訊28at.com

圖片CcO28資訊網(wǎng)——每日最新資訊28at.com

可以看到，按回車時，出現(xiàn)了滾動條，這個大家應該再熟悉不過了CcO28資訊網(wǎng)——每日最新資訊28at.com

這時，如果添加以下屬性CcO28資訊網(wǎng)——每日最新資訊28at.com

textarea{  field-sizing: content;}

結果...變成了這樣CcO28資訊網(wǎng)——每日最新資訊28at.com

圖片CcO28資訊網(wǎng)——每日最新資訊28at.com

因為這時沒有內容，所以也就沒有了尺寸，所以一般還需要手動加個尺寸CcO28資訊網(wǎng)——每日最新資訊28at.com

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

現(xiàn)在寬度固定了，高度仍然有內容決定CcO28資訊網(wǎng)——每日最新資訊28at.com

圖片CcO28資訊網(wǎng)——每日最新資訊28at.com

這樣就實現(xiàn)了一個回車自動增加高度的輸入框了，是不是很方便？CcO28資訊網(wǎng)——每日最新資訊28at.com

還可以設置最小尺寸，這樣就更符實際規(guī)需求了CcO28資訊網(wǎng)——每日最新資訊28at.com

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

效果如下CcO28資訊網(wǎng)——每日最新資訊28at.com

圖片CcO28資訊網(wǎng)——每日最新資訊28at.com

二、其他輸入元素

除了前面的文本域textarea，input也比較實用，比如要實現(xiàn)一個寬度自適應內容的輸入框CcO28資訊網(wǎng)——每日最新資訊28at.com

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

效果如下CcO28資訊網(wǎng)——每日最新資訊28at.com

圖片CcO28資訊網(wǎng)——每日最新資訊28at.com

另外，select元素也是支持的CcO28資訊網(wǎng)——每日最新資訊28at.com

<select>  <option>HTML</option>  <option>CSS</option>  <option>JavaScript</option>  <option>這是一個很長很長的選項</option></select>

默認情況下，select元素的寬度是由最長的那一項決定的CcO28資訊網(wǎng)——每日最新資訊28at.com

圖片CcO28資訊網(wǎng)——每日最新資訊28at.com

這樣在比較短的選項在選中時就比較突兀，現(xiàn)在我們設置自適應內容尺寸CcO28資訊網(wǎng)——每日最新資訊28at.com

select{  field-sizing: content;}

比上面要好很多了CcO28資訊網(wǎng)——每日最新資訊28at.com

圖片CcO28資訊網(wǎng)——每日最新資訊28at.com

以上幾個demo可以查看以下鏈接（Chrome 123+）CcO28資訊網(wǎng)——每日最新資訊28at.com

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

三、相比可編輯 div 的好處

在以往，我們通常是通過給div設置可編輯屬性，來實現(xiàn)內容自適應CcO28資訊網(wǎng)——每日最新資訊28at.com

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

雖然也能實現(xiàn)，但是有很多表單特性就丟失了。CcO28資訊網(wǎng)——每日最新資訊28at.com

1. onchange事件缺失，由于只是普通的div，所以無法監(jiān)聽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/7349831204134191131CcO28資訊網(wǎng)——每日最新資訊28at.com

本文鏈接：http://www.www897cc.com/showinfo-26-79140-0.html快速了解CSS表單尺寸屬性field-sizing

聲明：本網(wǎng)頁內容旨在傳播知識，若有侵權等問題請及時與本網(wǎng)聯(lián)系，我們將在第一時間刪除處理。郵件：2376512515@qq.com

上一篇： 優(yōu)化代碼邏輯：為什么盡量避免使用 if-else？

下一篇： itertools：用于處理可迭代對象的模塊