IE9及如下兼容placeholder

时间 2019-11-25

标签 ie9 如下兼容 placeholder 繁體版

原文原文链接

在input输入框中使用placeholder，能够给用户起到提醒或指引的做用，可是IE9及如下的IE版本都不支持placeholder，故在此给出一些解决方法：css

使用value来代替（作非空判断时须要排除值等于placeholder值的状况）
添加标签（需注意如何触发事件）
引用现成插件 jquery.placeholder.min.js（请自行搜索下载，此处就很少说了）

无论用哪一种方法，咱们都要先判断浏览器是否不支持placeholder，不支持的时候咱们才须要处理jquery

function placehSupport() {
   return 'placeholder' in document.createElement('input')  ;
}

1.浏览器

<body>
    <input id="title" type="text" placeholder="请输入标题">
<script src="jquery-1.11.3.js"></script>
<script>
    $(function(){
        function placehSupport() {
            return 'placeholder' in document.createElement('input');
        }    
        if(!placehSupport){  // 判断浏览器是否支持 placeholder

　　　　　　var placeVal = $('input#title').attr('placeholder'); 
　　　　　　$('input#title').val(placeVal); 
　　　　　　$('input#title').focus(function(){ 
　　　　　　　　if($.trim($('input#title').val())==placeVal ) { 
　　　　　　　　　　$('input#title').val(''); 
　　　　　　　　} 
　　　　　　}); 
　　　　　　input.blur(function(){ 
　　　　　　　　if($.trim($('input#title').val())=='') { 
　　　　　　　　　　 $('input#title').val(placeVal ); 
　　　　　　　　　}
            });
        }
    });

</script>

</body>

2.app

<body>
<div class="input-box">
    <input class="input1" type="text" placeholder="请输入标题">
</div>
<div class="input-box">
    <input class="input2" type="text" placeholder="请输入文章">
</div>
<script src="jquery-1.11.3.js"></script>
<script>
    function placeholderSupport() {
        return 'placeholder' in document.createElement('input');
    }
    if(!placeholderSupport()){   // 判断浏览器是否支持 placeholder
        $("input[placeholder]").each(function(){
            var _this = $(this);
            var left = _this.css("padding-left");
            _this.parent().append('<span class="placeholder" data-type="placeholder" style="left: '+left+'">'+_this.attr("placeholder")+'</span>');
            if(_this.val() != ""){
                _this.parent().find("span.placeholder").hide();
            }
            else{
                _this.parent().find("span.placeholder").show();
            }
        }).on("focus", function(){
            $(this).parent().find("span.placeholder").hide();
        }).on("blur", function(){
            var _this = $(this);
            if(_this.val() != ""){
                _this.parent().find("span.placeholder").hide();
            }
            else{
                _this.parent().find("span.placeholder").show();
            }
        });
        // 点击表示placeholder的标签至关于触发input
        $("span.placeholder").on("click", function(){
            $(this).hide();
            $(this).siblings("[placeholder]").trigger("click");
            $(this).siblings("[placeholder]").trigger("focus");
        });
    }
})
</script>
</body>