×

谈谈input输入框中的value和placeholder属性应用

作者:admin2015.12.30来源:Web前端之家浏览:33722评论:1
微信公众号

微信公众号

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

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

value

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

<input type="text" value="请输入手机号" class="inp-fon">
$(".inp-fon").focus(function(){
          var oldValue = $(this).val();
          if(oldValue == this.defaultValue){
              $(this).val("").addClass('focus-fon');
          }
      }).blur(function(){
          var oldValue = $(this).val();
          if(oldValue == ""){
               $(this).val(this.defaultValue).removeClass('focus-fon');;
          }
      });

请看下图演示:

默认状态:

QQ截图20151230151150.jpg

focus状态

QQ截图20151230153438.jpg

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

placeholder

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

<input type="text" placeholder="请输入手机号" class="inp-fon">
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
    color: #f00;  
}

::-moz-placeholder { /* Mozilla Firefox 19+ */
    color: #f00;
}

input:-ms-input-placeholder,
textarea:-ms-input-placeholder {
    color: #f00;
}

input::-webkit-input-placeholder,
textarea::-webkit-input-placeholder {
    color: #f00;
}

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

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

温馨提示:本文作者系admin ,经Web前端之家编辑修改或补充,转载请注明出处和本文链接:
http://jiangweishan.com/article/inputStadus.html

网友评论文明上网理性发言 已有1人参与

发表评论:

评论列表

最新留言

  • 访客

    谢谢楼主。。。。。。。。...

  • weblft

    表示不想加班,但是很难!!!...

  • 前端菜鸟

    也不全是我总结的哟,只是学习,大部分是来自大神的杰作。...

  • admin

    感觉不像前端菜鸟,学术很专啊,加油!...

  • admin

    可以的,底部有申请连接的。...

  • BudgetVM优惠码

    朋友交换链接吗...

  • 问我

    我...

  • admin

    是的,很难,可以笔记下来,便于查阅。...

首页|JavaScript|HTML|HTML4|HTML5|CSS3|开发工具|性能优化|移动开发|前端教程|性能优化|开发工具|酷站欣赏|UI设计|前端教程

Copyright © 2013-2018 Web前端之家(www.jiangweishan.com) 版权所有 All Rights Reserved.
粤ICP备12067512号-1

Copyright Your WebSite.Some Rights Reserved.

Powered By Z-BlogPHP 1.5.2 Zero