首页 > > 网页制作 > css >

placeholder不兼容 IE10 以下版本的解决方法

2018-06-24 00:49:42来源：未知阅读 ()

对于input输入框placeholder的兼容问题：

HTML代码:

<input type="text" placeholder="placeholder的ie兼容问题">

JS代码:

<!--[if lt IE 10]>

<script>

//placeholder 兼容ie
  $(function(){
    var placeholderfriend = {  
    focus: function(s) {  
      s = $(s).hide().prev().show().focus();  
      var idValue = s.attr("id");  
      if (idValue) {  
        s.attr("id", idValue.replace("placeholderfriend", ""));  
      }  
      var clsValue = s.attr("class");  
      if (clsValue) {  
        s.attr("class", clsValue.replace("placeholderfriend", ""));  
      }  
    }  
  }
  //判断是否支持placeholder  
  function isPlaceholer() {  
    var input = document.createElement('input');  
    return "placeholder" in input;  
  }  
  //不支持的代码  
  if (!isPlaceholer()) {  
    $(function() {  
  
      var form = $(this);  
      var elements = form.find("input[type='text'][placeholder]");  
      elements.each(function() {  
        var s = $(this);  
        var pValue = s.attr("placeholder");  
        var sValue = s.val();  
        if (pValue) {  
          if (sValue == '') {  
            s.val(pValue);  
          }  
        }  
      });  
      elements.focus(function() {  
        var s = $(this);  
        var pValue = s.attr("placeholder");  
        var sValue = s.val();  
        if (sValue && pValue) {  
          if (sValue == pValue) {  
            s.val('');  
          }  
        }  
      });  
      elements.blur(function() {  
        var s = $(this);  
        var pValue = s.attr("placeholder");  
        var sValue = s.val();  
        if (!sValue) {  
          s.val(pValue);  
        }  
      });
      var elementsPass = form.find("input[type='password'][placeholder]");  
      elementsPass.each(function(i) {  
        var s = $(this);  
        var pValue = s.attr("placeholder");  
        var sValue = s.val();  
        if (pValue) {  
          if (sValue == '') {  
            var html = this.outerHTML || "";  
            html = html.replace(/\s*type=(['"])?password\1/gi, " type=text placeholderfriend").replace(/\s*(?:value|on[a-z]+|name)(=(['"])?\S*\1)?/gi, " ").replace(/\s*placeholderfriend/, " placeholderfriend value='" + pValue + "' " + "onfocus='placeholderfriendfocus(this);' ");  
            var idValue = s.attr("id");  
            if (idValue) {  
              s.attr("id", idValue + "placeholderfriend");  
            }  
            var clsValue = s.attr("class");  
            if (clsValue) {  
              s.attr("class", clsValue + "placeholderfriend");  
            }  
            s.hide();  
            s.after(html);  
          }  
        }  
      });  
      elementsPass.blur(function() {  
        var s = $(this);  
        var sValue = s.val();  
        if (sValue == '') {  
          var idValue = s.attr("id");  
          if (idValue) {  
            s.attr("id", idValue + "placeholderfriend");  
          }  
          var clsValue = s.attr("class");  
          if (clsValue) {  
            s.attr("class", clsValue + "placeholderfriend");  
          }  
          s.hide().next().show();  
        }  
      });  
    });  
  }  
  window.placeholderfriendfocus = placeholderfriend.focus; 
  })

</script>
<![endif]-->
只要在页面上加载这些js就能兼容到 IE8
有一款jQuery的placeholder插件确实很不多，用起来也挺方便

下载源码地址：https://github.com/jamesallardice/Placeholders.js/

引用方法直接在页面上加载下载好的插件，再调用插件：

<script type="text/javascript" src="js/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="js/placeholders.js"></script>

<script type="text/javascript">
$(function(){ $('input, textarea').placeholder(); });
</script>

标签：

版权申明：本站文章部分自网络，如有侵权，请联系：west999com@outlook.com
特别注意：本站所有转载文章言论不代表本站观点，本站所提供的摄影照片，插画，设计作品，如需使用，请与原作者联系，版权归原作者所有