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;
    }

  • 相关阅读:
    IDEA常用快捷键
    js读取Excel文件
    tensorBoard展示图片出错分析TensorBoard can’t find your event files.
    在乌班图系统中使用conda报错:from conda.cli import main ModuleNotFoundError: No module named 'conda'
    Event loop is closed 纪宇
    vue supermall蘑菇街API后端接口
    解决Uncaught (in promise) NavigationDuplicated: Avoided redundant navigation to current location问题
    Linux运行jar包的几种方式
    Linux下根据关键字搜索最后一条日志
    Linux命令之tcpdump
  • 原文地址:https://www.cnblogs.com/THONLY/p/6230497.html
Copyright © 2011-2022 走看看