html5的placeholder属性在ie8及以下不兼容问题的解决办法

日期：2016-11-27 浏览量： 分类：优秀文章 来源： CMS大学整理发布（帝国CMS大百科）

html5提供了很多方便的属性，例如input表单的placeholder属性，可以很方便添加input的默认提示语，用户体验也比较好，但html5的兼容性是个硬伤，最近cms大学小编就遇到了这个问题，页面上的placeholde属性在ie8及以下没有作用，于是就出现了下面的情况，input输入框变成空白了，非常尴尬，接下来CMS大学小编给出JavaScript的解决办法，将这段放在js文件末尾就好了。。

html5的placeholder属性在ie8及以下不兼容问题的解决办法

折叠JavaScript 代码
  1. (function($) {    
  2.   var placeholderfriend = {    
  3.     focus: function(s) {    
  4.       s = $(s).hide().prev().show().focus();    
  5.       var idValue = s.attr("id");    
  6.       if (idValue) {    
  7.         s.attr("id", idValue.replace("placeholderfriend", ""));    
  8.       }    
  9.       var clsValue = s.attr("class");    
  10.       if (clsValue) {    
  11.         s.attr("class", clsValue.replace("placeholderfriend", ""));    
  12.       }    
  13.     }    
  14.   }    
  15.     
  16.   //判断是否支持placeholder    
  17.   function isPlaceholer() {    
  18.     var input = document.createElement('input');    
  19.     return "placeholder" in input;    
  20.   }    
  21.   //不支持的代码    
  22.   if (!isPlaceholer()) {    
  23.     $(function() {    
  24.     
  25.       var form = $(this);    
  26.       var elements = form.find("input[type='text'][placeholder]");    
  27.       elements.each(function() {    
  28.         var s = $(this);    
  29.         var pValue = s.attr("placeholder");    
  30.         var sValue = s.val();    
  31.         if (pValue) {    
  32.           if (sValue == '') {    
  33.             s.val(pValue);    
  34.           }    
  35.         }    
  36.       });    
  37.     
  38.       elements.focus(function() {    
  39.         var s = $(this);    
  40.         var pValue = s.attr("placeholder");    
  41.         var sValue = s.val();    
  42.         if (sValue && pValue) {    
  43.           if (sValue == pValue) {    
  44.             s.val('');    
  45.           }    
  46.         }    
  47.       });    
  48.     
  49.       elements.blur(function() {    
  50.         var s = $(this);    
  51.         var pValue = s.attr("placeholder");    
  52.         var sValue = s.val();    
  53.         if (!sValue) {    
  54.           s.val(pValue);    
  55.         }    
  56.       });    
  57.     
  58.       var elementsPass = form.find("input[type='password'][placeholder]");    
  59.       elementsPass.each(function(i) {    
  60.         var s = $(this);    
  61.         var pValue = s.attr("placeholder");    
  62.         var sValue = s.val();    
  63.         if (pValue) {    
  64.           if (sValue == '') {    
  65.             var html = this.outerHTML || "";    
  66.             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);' ");    
  67.             var idValue = s.attr("id");    
  68.             if (idValue) {    
  69.               s.attr("id", idValue + "placeholderfriend");    
  70.             }    
  71.             var clsValue = s.attr("class");    
  72.             if (clsValue) {    
  73.               s.attr("class", clsValue + "placeholderfriend");    
  74.             }    
  75.             s.hide();    
  76.             s.after(html);    
  77.           }    
  78.         }    
  79.       });    
  80.     
  81.       elementsPass.blur(function() {    
  82.         var s = $(this);    
  83.         var sValue = s.val();    
  84.         if (sValue == '') {    
  85.           var idValue = s.attr("id");    
  86.           if (idValue) {    
  87.             s.attr("id", idValue + "placeholderfriend");    
  88.           }    
  89.           var clsValue = s.attr("class");    
  90.           if (clsValue) {    
  91.             s.attr("class", clsValue + "placeholderfriend");    
  92.           }    
  93.           s.hide().next().show();    
  94.         }    
  95.       });    
  96.     
  97.     });    
  98.   }    
  99.   window.placeholderfriendfocus = placeholderfriend.focus;    
  100. })(jQuery);    

 

Tags： html5   兼容性   ie

相关推荐

cms大学，为帝国cms用户提供动力
Copyright © 2016 CmsDX.com All Rights Reserved.