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了，比较简单，如果想看效果，把代码复制到网页里查看。