zoukankan      html  css  js  c++  java
  • placeholder在IE下的兼容问题 TJ

    最近写项目要求兼容到ie8,写完了去ie测试的时候,发现了placeholder在ie下的兼容问题,为了解决,搜罗网上各种牛人的解决方案,自己总结如下:

     css样式(设置各浏览器下placeholder的样式问题):

    //谷歌浏览器

    input::-webkit-input-placeholder{
     font-family: "Microsoft Yahei", 微软雅黑, sans-serif,"Helvetica Neue", Helvetica, Arial, "Hiragino Sans GB",  STHeiti, 华文细黑,"PingFang SC";
     font-size:14px;
     color:#ccc;
    }

    //火狐4-18使用伪类
    input::-moz-placeholder{
     font-family: "Microsoft Yahei", 微软雅黑, sans-serif,"Helvetica Neue", Helvetica, Arial, "Hiragino Sans GB",  STHeiti, 华文细黑,"PingFang SC";
     font-size:14px;
     color:#ccc;
    }

    //火狐19+使用伪元素
    input:-moz-placeholder{
     font-family: "Microsoft Yahei", 微软雅黑, sans-serif,"Helvetica Neue", Helvetica, Arial, "Hiragino Sans GB",  STHeiti, 华文细黑,"PingFang SC";
     font-size:14px;
     color:#ccc;
    }

    //IE10使用伪类 
    input::-ms-input-placeholder{
     font-family: "Microsoft Yahei", 微软雅黑, sans-serif,"Helvetica Neue", Helvetica, Arial, "Hiragino Sans GB",  STHeiti, 华文细黑,"PingFang SC";
     font-size:14px;
     color:#ccc;
    }

    js代码(判断是否支持placeholder)

    if( !('placeholder' in document.createElement('input')) ){     
           $('input[placeholder],textarea[placeholder]').each(function(){  
             var that = $(this),  
             text= that.attr('placeholder');  
             if(that.val()===""){  
               that.val(text).addClass('placeholder');  
             }  
             that.focus(function(){  
               if(that.val()===text){  
                 that.val("").removeClass('placeholder');  
               }  
             })  
             .blur(function(){  
               if(that.val()===""){  
                 that.val(text).addClass('placeholder');  
               }  
             })  
             .closest('form').submit(function(){  
               if(that.val() === text){  
                 that.val('');  
               }  
             });  
           });  
         } 

    在input输入数字后,会出现黄色的背景,解决代码如下:

    nput:-webkit-autofill,
    textarea:-webkit-autofill,
    select:-webkit-autofill {
           -webkit-box-shadow: 0 0 0 1000px white inset;
    }
     input[type=text]:focus, input[type=password]:focus, textarea:focus {
          -webkit-box-shadow: 0 0 0 1000px white inset;
    }

  • 相关阅读:
    小知识点随手记
    [学习笔记]行列式
    集群心跳机制
    [学习笔记]整数划分数
    如何修改集群的公网信息(包括 VIP) (文档 ID 1674442.1)
    [学习笔记]二叉树的遍历
    Oracle RAC/Clusterware 多种心跳heartbeat机制介绍 RAC超时机制分析
    bzoj4671: 异或图——斯特林反演
    为Oracle Clusterware修改公用及私有网络接口
    [学习笔记]斯特林反演
  • 原文地址:https://www.cnblogs.com/THONLY/p/6230497.html
Copyright © 2011-2022 走看看