IE9及以下兼容placeholder

Posted jingjing-blog

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了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>

 

以上是关于IE9及以下兼容placeholder的主要内容,如果未能解决你的问题,请参考以下文章

兼容placeholder

IE9以下 placeholder兼容

placeholder兼容性问题

input placeholder 兼容问题

placehoder不兼容ie9以下和opero12以下

ie9 placeholder兼容