对于input输入框placeholder的兼容问题:
HTML代码:
<input type="text" placeholder="placeholder的ie兼容问题">
JS代码:
<!-- 对于IE 10 以下版本placeholder的兼容性调整 -->
<!--[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>