input输入框中的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了,比较简单,如果想看效果,把代码复制到网页里查看。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 172,870评论 25 708
  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 134,841评论 18 139
  • 前提,部分参考资料已忘记,本文只提供自己备用,部分参考望见谅。 1.请求设置:需要设置代理p.p1 {margin...
    大脸猫xiao3阅读 298评论 0 0
  • 文/梓星 我是花园里 那束最不起眼的小花 冬去春来,从来没有人在意过 我盛开的喜和凋谢的悲 直到我遇见了你 那个用...
    梓莘阅读 298评论 0 4
  • 打谷子也就是收水稻。我们这里是一稻,一年只能种一次。 每年要开学的夏末就开始打谷子。年轻人都出去了,只剩下一些...
    长安就很好阅读 3,742评论 3 6