實現 input 無內容時縮小居中顯示，有內容、有焦點時變長顯示

前兩天作了一個搜索中間頁，有個 input 的效果挺有意思，準備分享一下。

要求

1. 默認時（無內容、無焦點）顯示居中效果。
   
2. 有焦點或者有內容，input 變長
   

測試地址

https://www.lilnong.top/stati...

實現思路

Vue + css 實現

1. <input v-model="value" :class="{'focus':value.length}"> 咱們經過內容的長度來動態修改 class ，用來實現有內容時的效果
2. input.focus,input:focus{width: 100%} 咱們經過 :focus 這個僞類來監聽獲取焦點的狀態。

純 css 實現

上一個方案依賴js。那有沒有不依賴 js 的呢？重點在判斷是否有內容

咱們如何判斷呢？ 這裏要依賴兩個東西 required 和 :valid

required

required 屬性規定必須填寫內容。能夠用在 <input> 類型：text, search, url, telephone, email, password, date pickers, number, checkbox, radio, file。

:valid

:valid 選擇器做用在限制值的元素上，例如 input 元素中的 min 和 max 屬性，require，及正確的 email 字段, 合法的數字字段等。:valid 選擇器能夠在表單元素的值須要根據指定條件驗證時設置指定樣式。

那麼問題就很簡單了，咱們讓他必填，這樣就能夠根據這個狀態來顯示樣式。

優化一下無內容時不顯示 close 按鈕

方案一：固然是 js 大法了，仍是判斷 value.length。
方案二：增長一個表單，而後判斷根據表單的 :valid 來決定渲染狀態。

微信公衆號：前端linong

歡迎你們關注個人公衆號。有疑問也能夠加個人微信前端交流羣。

總結

1. js 實現固然是兼容性極好。
2. css 實現來講比較簡單，固然兼容性就比較感人。。