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

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

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

創(chuàng)新互聯(lián)公司主營(yíng)集安網(wǎng)站建設(shè)的網(wǎng)絡(luò)公司,主營(yíng)網(wǎng)站建設(shè)方案,APP應(yīng)用開(kāi)發(fā),集安h5成都小程序開(kāi)發(fā)搭建,集安網(wǎng)站營(yíng)銷推廣歡迎集安等地區(qū)企業(yè)咨詢

效果可以參見(jiàn)下面的GIF錄屏示意：

現(xiàn)在這種設(shè)計(jì)在移動(dòng)端很常見(jiàn)，因?yàn)閷挾仁窍∪钡摹Ｏ嘈挪簧偃嗽O(shè)計(jì)項(xiàng)目中有實(shí)現(xiàn)過(guò)這種交互，而且，我敢保證是利用JS實(shí)現(xiàn)的。

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

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

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

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

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

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

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

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

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

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

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

    
    郵箱

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

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

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

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

最后， 對(duì)這個(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寫各種事件，判斷各種場(chǎng)景簡(jiǎn)單多了？

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

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

其他

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

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

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