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

  • 相关阅读:
    音频电路设计中的基本知识(-)
    Usart的单线半双工模式(stm32F10x系列)
    RTS与CTS的含义
    NetBIOS与Winsock编程接口
    debian下使用gitosis+gitweb搭建SSH认证的git服务器
    解决:无法将“Add-Migration”项识别为 cmdlet、函数、脚本文件或可运行程序的名称。请检查名称的拼写,如果包括路径,请确保路径正确,然后再试一次
    Windows Azure Storage Client Library 2.0 入门
    Windows Azure Table Storage 解决 Guid 查询问题
    EF 报【序列包含一个以上的元素】解决办法
    javascript技巧大全套
  • 原文地址:https://www.cnblogs.com/THONLY/p/6230497.html
Copyright © 2020-2023  润新知