IE9及以下兼容placeholder

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

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

不管用哪种方法，我们都要先判断浏览器是否不支持placeholder，不支持的时候我们才需要处理

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.




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




 






            

            
posted @ 
2018-01-02 15:45 
泥wawa 
阅读(366) 
评论(0) 
编辑 
收藏 
举报