value和placeholder 的区别

墨蓝 2022-07-19 11:48 84阅读 0赞

由于[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][QQ_20151230151150.jpg]

focus状态

![QQ截图20151230153438.jpg][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了，比较简单，如果想看效果，把代码复制到网页里查看。

[HTML5]: http://www.jiangweishan.com/Html5/
[QQ_20151230151150.jpg]: /images/20220718/b054c29ce94b455b855126edae6bd1bb.png
[QQ_20151230153438.jpg]: /images/20220718/7be6ff49c3c24ca0b6456834f3b0b6dc.png