vlambda博客
学习文章列表

HTML input 模仿Android原生焦点效果

Android原生输入框的焦点效果一直都让人看起来很舒服,所以今天就用web技术来实现。

先看一下效果图:

原理很简单:

就是在input框上加一层label,然后通过判断input框是否获得焦点,当当前input获取焦点后,给绑定它的label添加上移样式(active),

然后input失去焦点之后,判断该input是否有输入内容,如果没有内容,则溢出相应label的样式(active),如果有,则保留改样式(active)。

相信大家都应该理解了吧!

先说说在HTML页面部分,每个input绑定相应的label:

<div class="login-wrap"> <ul class="login-form login-form-logo"> <li> <label for="phone">电话</label> <input id="phone" type="text" class="text clearinput"> </li> <li> <label for="password">密码</label> <input id="password" type="password" class="text"> </li> <li style="display:-webkit-box;"> <label for="txtVcode">验证码</label> <input id="txtVcode" type="text" class="text"> <img id="vcode" onclick="login.FreshVcode()" class="images-code" src="../images/code.jpg"> </li> </ul>  </div>

之后是css部分:当input未获取焦点之前,

.login-wrap { margin: 0 0.45rem;}.login-form { margin: 0 0 0.65rem;}.login-form li { border-bottom: 1px solid #eee; height: 1.2rem; line-height: 1.2rem; overflow: hidden; margin: 0.05rem 0 0; display: -webkit-box; position: relative;}.login-form li label { color: #bbb; font-size: 0.45rem; position: absolute; top: 65%; -webkit-transform: translateY(-50%); transform: translateY(-50%); -webkit-transform-origin: top left; transform-origin: top left; -webkit-transition: margin 0.15s ease, padding 0.15s ease, -webkit-transform 0.15s ease; transition: margin 0.15s ease, padding 0.15s ease, -webkit-transform 0.15s ease; transition: margin 0.15s ease, padding 0.15s ease, transform 0.15s ease; transition: margin 0.15s ease, padding 0.15s ease, transform 0.15s ease, -webkit-transform 0.15s ease; z-index: 1;}.login-form li .text { background: none; border: none; height: 1rem; display: block; -webkit-box-flex: 1; font-size: 0.4rem; color: #333; margin-top: 0.3rem;}

当input获取焦点之后,给其父类添加active样式即可

.login-form .active label { -webkit-transform: translateY(calc(-60% - 0.75em)) scale(0.75); transform: translateY(calc(-60% - 0.75em)) scale(0.75); color: #f47983;}

然后是Js部分(基于jQuery实现),jQuery实现起来比较简单,两行代码就可以解决了,原生JS的话,交给大家去思考实现了。

$('input').focus(function() { $(this).parent().addClass('active'); }); $('input').blur(function() { if(!$(this).val()){ $(this).parent().removeClass('active'); } });