placeholder属性在IE中失效的解决办法

Html

Css

Js

* { margin:0; padding:0; border:0; } *,*:after,*:before { -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box; } input { display:block; margin:20px auto; width:500px; height:50px; border:2px solid #ccc; padding:0 20px; }

;(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); $("input").placeholder();

↑上面代码改变，会自动显示代码结果

jQuery调用版本：1.8.3

用户在使用表单的时候就会看到“用户名”这样的提示，在用户点击输入框时提示文字消失，非常的实用。但是该效果在IE下会失效，如果是多个输入框的话，没有提示文字，对用户十分的不友好。

只需要使用本段js代码，就可以解决placeholder属性在IE中失效了。