value和placeholder 的区别

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

value

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

 
 
   
   
   
   
  1.  type="text" value="请输入手机号" class="inp-fon">
 
 
   
   
   
   
  1. $(".inp-fon").focus(function(){
  2.           var oldValue = $(this).val();
  3.           if(oldValue == this.defaultValue){
  4.               $(this).val("").addClass('focus-fon');
  5.           }
  6.       }).blur(function(){
  7.           var oldValue = $(this).val();
  8.           if(oldValue == ""){
  9.                $(this).val(this.defaultValue).removeClass('focus-fon');;
  10.           }
  11.       });

请看下图演示:

默认状态:

value和placeholder 的区别_第1张图片

focus状态

value和placeholder 的区别_第2张图片

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

placeholder

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

 
 
   
   
   
   
  1.  type="text" placeholder="请输入手机号" class="inp-fon">
 
 
   
   
   
   
  1. :-moz-placeholder { /* Mozilla Firefox 4 to 18 */
  2.     color: #f00;  
  3. }
  4.  
  5. ::-moz-placeholder { /* Mozilla Firefox 19+ */
  6.     color: #f00;
  7. }
  8.  
  9. input:-ms-input-placeholder,
  10. textarea:-ms-input-placeholder {
  11.     color: #f00;
  12. }
  13.  
  14. input::-webkit-input-placeholder,
  15. textarea::-webkit-input-placeholder {
  16.     color: #f00;
  17. }

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

你可能感兴趣的:(html)