1,在页面设计中,表单的设计需要提示性的词语来引导用户使用,最常见的的就是使用标签placeholder属性,只可惜这个HTML 5属性在低版本的IE下会失效,那该怎么办呢?
2,placeholder 属性提供可描述输入字段预期值的提示信息。该提示会在输入字段为空时显示,并会在字段获得焦点时消失。
3,只需要使用以下js代码,就可以解决placeholder属性在IE中失效了。
<script type="text/javascript">
;(function($){
$.fn.placeholder = function(options){
var opts = $.extend({}, $.fn.placeholder.defaults, options);
var isIE = document.all ? true : false;
return this.each(function(){
var _this = this,
placeholderValue =_this.getAttribute("placeholder"); //缓存默认的placeholder值
if(isIE){
_this.setAttribute("value",placeholderValue);
_this.onfocus = function(){
$.trim(_this.value) == placeholderValue ? _this.value = "" : '';
};
_this.onblur = function(){
$.trim(_this.value) == "" ? _this.value = placeholderValue : '';
};
}
});
};
})(jQuery);
</script>
4,设置需要支持此功能的元素,注意:此代码基于jquery库,所以使用前请先引入jquery库文件。
<script type="text/javascript">
$("input").placeholder();
</script>