鴻蒙OS 4.0公測機型公布：甚至連nova6都支持
華為全新的HarmonyOS 4.0操作系統將于今天下午正式登場，官方在發布會之前也已經正式給出了可升級的機型產品，這意味著這些機型會率先支持升級享用。這次的HarmonyOS 4.0支持
最近Chrome 123又推出了一個新的 CSS 屬性：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+）
在以往，我們通常是通過給div設置可編輯屬性，來實現內容自適應
<div contenteditable="true"> </div>雖然也能實現，但是有很多表單特性就丟失了。
[1]CSS field-sizing (juejin.cn)： https://code.juejin.cn/pen/7349831204134191131
本文鏈接：http://m.www897cc.com/showinfo-26-79140-0.html快速了解CSS表單尺寸屬性field-sizing
聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。郵件：2376512515@qq.com
Copyright ? 2016-2023 天津谷騏科技有限公司 版權所有 sitemap.xml
違法及侵權請聯系：2376512515@qq.com 津ICP備18001702號
津公網安備 12010102000574號