PROMULGATOR

    yanguangran

    广东省珠海市
    Html
    Css
    Js
1
<input type="text" placeholder="你好placeholder">
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
* {
    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;
}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
;(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();
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
↑上面代码改变，会自动显示代码结果 jQuery调用版本：1.8.3
 立即下载

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

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

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

1
      是岁月宽容0
      2018/2/10 14:35:08
      嗯，确实解决了，但ie8里好丑
      回复