ie中placeholder属性不支持,js解决

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了ie中placeholder属性不支持,js解决相关的知识,希望对你有一定的参考价值。

ie中placeholder属性不支持,js的解决方法:

//placeholder属性在ie下兼容
            function placeholder ( pEle , con ) {
                var pEle = pEle
                if( pEle.find("input,textarea").val() == "" ){
                    pEle.append("<i class=‘placeholder_ie‘>"+con+"</i>");
                }
                pEle.click(function () {
                    $(this).find(".placeholder_ie").css("display","none");
                    $(this).find("input,textarea").focus();
                })
                pEle.find("input,textarea").blur(function () {
                    if( pEle.find("input,textarea").val() == "" ){
                        pEle.find(".placeholder_ie").css("display","inline-block");
                    }
                })
            }
            // ie浏览器
            if( navigator.appName == "Microsoft Internet Explorer" ){
                placeholder( $(".header_box .serach_content").eq(0) , "search..." );
                placeholder( $(".news_product .search_website>p").eq(0) , "深圳" );
            }

css:

/*输入框ie下placeholder样式*/
.placeholder_ie{
    display: inline-block;
    width:100%;
    height:26px;
    position: absolute;
    left:-42px;
    top:0;
    line-height: 26px;
    font-size: 14px;
    padding:0 10px;
    color:#989898;
}

 

以上是关于ie中placeholder属性不支持,js解决的主要内容,如果未能解决你的问题,请参考以下文章

在IE8及以下的浏览器中,不支持placeholder属性的解决办法

让 IE 8 及以下浏览器支持 表单 input [placeholder] 属性

兼容placeholder

jquery.placeholder.js解决IE8兼容h5中input属性placeholder属性

IE10以下兼容H5中的placeholder

解决输入框placeholder属性不兼容IE9及以下浏览器问题