強(qiáng)大的CSS：placeholder-shown偽類實(shí)現(xiàn)Material Design占位符交互效果

一、Material Design規(guī)范中占位符交互效果

Material Design風(fēng)格占位符交互效果官方示意見此 demo頁面 。

效果可以參見下面的GIF錄屏示意：

現(xiàn)在這種設(shè)計(jì)在移動端很常見，因?yàn)閷挾仁窍∪钡?。相信不少人設(shè)計(jì)項(xiàng)目中有實(shí)現(xiàn)過這種交互，而且，我敢保證是利用JS實(shí)現(xiàn)的。

實(shí)際上，我們可以借助CSS :placeholder-shown偽類，純CSS，無任何JS，實(shí)現(xiàn)這樣的占位符交互效果。

:placeholder-shown表示，當(dāng)輸入框的placeholder內(nèi)容顯示的時(shí)候，輸入框干嘛干嘛。

:placeholder-shown偽類目前兼容性如下：

兼容性還是很不錯(cuò)的，在移動端我們可以放心使用。因?yàn)榫退阋恍├鲜謾C(jī)不支持，也不過是傳統(tǒng)的placeholder占位符效果，并沒有什么損失。

二、:placeholder-shown經(jīng)典案例

展示使用幾個(gè):placeholder-shown實(shí)現(xiàn)label特性占位符案例。

下面就是我實(shí)現(xiàn)的demo頁面中的效果圖（GIF動圖）：

輸入內(nèi)容功能也是布局效果也是正常的：

純CSS實(shí)現(xiàn)，要比JS實(shí)現(xiàn)好一千倍，代碼少，性能高，樣式調(diào)整方便，上手簡單容易，可謂是前端必備技能了。

實(shí)現(xiàn)原理

拿第一個(gè)fill模式的輸入框舉例，HTML結(jié)構(gòu)如下：

<div class="input-fill-x">
    <input class="input-fill" placeholder="郵箱">
    <label class="input-label">郵箱</label>
</div>

首先， 讓瀏覽器默認(rèn)的placeholder效果不可見，我們可以讓顏色透明即可，如下CSS：

/* 默認(rèn)placeholder顏色透明不可見 */
.input-fill:placeholder-shown::placeholder {
    color: transparent;
}

然后， 后面的 .input-label 這個(gè)label元素代替成為我們?nèi)庋劭吹降恼嘉环?。我們可以采用絕對定位：

.input-fill-x {
    position: relative;
}
.input-label {
    position: absolute;
    left: 16px; top: 14px;
    pointer-events: none;
}

最后， 對這個(gè)label元素在輸入框focus時(shí)候，以及非placeholder顯示的時(shí)候進(jìn)行重定位（縮小并位移到上方）：

.input-fill:not(:placeholder-shown) ~ .input-label,
.input-fill:focus ~ .input-label {
    transform: scale(0.75) translate(0, -32px);
}

于是，效果達(dá)成！

是不是要比JS寫各種事件，判斷各種場景簡單多了？

三、趕快項(xiàng)目中用起來吧

趕快項(xiàng)目中用起來吧！或者把這個(gè)技術(shù)分享給其他小伙伴吧~

其他

• demo頁面還使用了其他一些CSS3屬性，例如，外部容器寬度是跟著輸入框?qū)挾茸叩模褂玫氖莣idth:fit-content]這個(gè)聲明。
• 輸入框focus時(shí)候有個(gè)邊框動畫效果，借助了:focus-within偽類選擇器，:focus-within偽類選擇器也是非常強(qiáng)非常實(shí)用以后會大火的選擇器，如果不了解的一定要進(jìn)行了解。
• :placeholder-shown還可以實(shí)現(xiàn)下面的交互：輸入框的后面（或下方）會有關(guān)于輸入內(nèi)容的說明和提示信息（因?yàn)楹荛L，placeholder放不下），當(dāng)用戶輸入內(nèi)容，提示信息消失。

自己是一個(gè)五年的前端工程師,希望本文對你有幫助！

這里推薦一下我的前端學(xué)習(xí)交流扣qun：731771211 ，里面都是學(xué)習(xí)前端的，如果你想制作酷炫的網(wǎng)頁，想學(xué)習(xí)編程。自己整理了一份2019最全面前端學(xué)習(xí)資料，從最基礎(chǔ)的HTML+CSS+JS【炫酷特效，游戲，插件封裝，設(shè)計(jì)模式】到移動端HTML5的項(xiàng)目實(shí)戰(zhàn)的學(xué)習(xí)資料都有整理，送給每一位前端小伙伴，每天分享技術(shù)