一、材料设计规范中占位符交互效果
材料设计风格占位符交互效果官方示意见此 演示页面 。
效果可以参见下面的GIF录屏示意:
现在这种设计在移动端很常见,因为宽度是稀缺的。相信不少人设计项目中有实现过这种交互,而且,我敢保证是利用JS实现的。
实际上,我们可以借助CSS: placeholder-shown伪类,纯CSS,无任何JS,实现这样的占位符交互效果。
:placeholder-shown表示,当输入框的占位符内容显示的时候,输入框干嘛干嘛。
:placeholder-shown伪类目前兼容性如下:
兼容性还是很不错的,在移动端我们可以放心使用。因为就算一些老手机不支持,也不过是传统的占位符占位符效果,并没有什么损失。
二:placeholder-shown经典案例
展示使用几个:placeholder-shown实现标签特性占位符案例。
下面就是我实现的演示页面中的效果图(GIF动图):
输入内容功能也是布局效果也是正常的:
纯CSS实现,要比JS实现好一千倍,代码少,性能高,样式调整方便,上手简单容易,可谓是前端必备技能了。
实现原理
拿第一个填满模式的输入框举例,HTML结构如下:
<前> & lt; div 类=癷nput-fill-x"祝辞 ,,,& lt; input 类=癷nput-fill",占位符=坝氏洹氨? ,,,& lt; label 类=癷nput-label"在邮箱& lt;/label> & lt;/div> 之前让浏览器默认的占位符效果不可见,我们可以让颜色透明即可,如CSS下:
<前>/*,默认占位符颜色透明不可见,*/.input-fill: placeholder-shown:: placeholder { ,,,颜色:,透明; } 之前后面的 <代码> .input-label 这个标签元素代替成为我们肉眼看到的占位符。我们可以采用绝对定位:
<前> .input-fill-x { ,,,位置:,相对; } .input-label { ,,,位置:,绝对; ,,,左:,16 px;,:, 14 px; ,,,pointer-events:,没有; } 之前对这个标签元素在输入框焦点时候,以及非占位符显示的时候进行重定位(缩小并位移到上方):
<前> .input-fill:没有(placeholder-shown), ~, .input-label, .input-fill: focus ~, .input-label { ,,,变换:,规模(0.75),翻译(0,-32 px); } 之前于是,效果达成!
是不是要比JS写各种事件,判断各种场景简单多了吗?
三,赶快项目中用起来吧
赶快项目中用起来吧!或者把这个技术分享给其他小伙伴吧~
-
<李>
演示页面还使用了其他一些CSS3属性,例如,外部容器宽度是跟着输入框宽度走的,使用的是宽度:适合内容]这个声明。
李
<李>
输入框焦点时候有个边框动画效果,借助了:重点进行伪类选择器,:重点进行伪类选择器也是非常强非常实用以后会大火的选择器,如果不了解的一定要进行了解。
李
<李>
:placeholder-shown还可以实现下面的交互:输入框的后面(或下方)会有关于输入内容的说明和提示信息(因为很长,占位符放不下),当用户输入内容,提示信息消失。
李
自己是一个五年的前端工程师,希望本文对你有帮助!
