我们想鼠标focus后默认文字消失

当前位置: 澳门新葡亰1495app > Web前端 >

我们想鼠标focus后默认文字消失。我们想鼠标focus后默认文字消失。我们想鼠标focus后默认文字消失。我们想鼠标focus后默认文字消失。最近忙得不可开交,都没时间更新了,年底了嘛,为了冲KPI,公司的活动项目一个接一个呀,为了年底有个好收成,希望奖金多多啊。近期活动大都跟表单挂钩,不管是PC端还是移动端,做多了,想总结点心得,今天谈谈表单中input输入框的一些常用状态。

由于HTML5的出现,使得表单的功能更加强大,input的功能应用起来更加简单,从value到placeholder。但是由于兼容问题,placeholder只适合在移动端的项目,IE6/7/8不支持,只能用value,或者你可以用其他方法模拟placeholder,具体案例你可以看支付宝和财付通的登录和注册页面。下面分别介绍下value和placeholder的实际应用。

value

如果用的是value,我们想鼠标focus后默认文字消失,移开后默认文字又重现,可以这样来写。

$.focus{varoldValue=$;if(oldValue==this.defaultValue){$.val.addClass;}}).blur{varoldValue=$;if(oldValue==""){$.val.removeClass;;}});

说明:澳门新葡亰1495app,默认状态是灰色的,然后focus后,输入的字体会变成黑色的,上面的JS里就是通过添加和删除样式“focus-fon”来控制的。

placeholder

如果用的是placeholder,我们就不需要JS了,因为它本身就自带focus和blur功能了。但是有时候设计师给我们的设计稿往往跟默认文字颜色是有区别的,那我们如何改变placeholder默认文字颜色呢,如下:

:-moz-placeholder{/*MozillaFirefox4to18*/color:#f00;}::-moz-placeholder{/*MozillaFirefox19+*/color:#f00;}input:-ms-input-placeholder,textarea:-ms-input-placeholder{color:#f00;}input::-webkit-input-placeholder,textarea::-webkit-input-placeholder{color:#f00;}

一般都是用以上这种方法来处理,这里就不放demo了,比较简单,如果想看效果,把代码复制到网页里查看。

这也是我近期的一点心得而已,至于上面提到的支付宝和财付通的登录和注册页面的效果,以后有时间再说吧。如您有好的方法,恳请留言给我。

上一篇:◆ 研究多款实用插件【比如jQuery.lazyload 下一篇:没有了