兼容IE9+的placeholder写法

由于是在vue项目中遇到的这个问题，所以这里就以vue为例子，html页面也是一样的逻辑：

// 在这里先写一个方法methods
addplaceholder() {
    if ($("#modifypwd .placeholder").length > 0) {
        $('.placeholder').remove();
    }
    $("[placeholder]").each(function() {
        var _this = $(this);
        var left = _this.css("padding-left");
        _this.parent().append('<span class="placeholder" data-type="placeholder" style="left: ' + left + '">' + _this.attr("placeholder") + '</span>');
        if (_this.val() != "") {
            _this.parent().find("span.placeholder").hide();
        } else {
            _this.parent().find("span.placeholder").show();
        }
    }).on("focus", function() {
        $(this).parent().find("span.placeholder").hide();
    }).on("blur", function() {
        var _this = $(this);
        if (_this.val() != "") {
            _this.parent().find("span.placeholder").hide();
        } else {
            _this.parent().find("span.placeholder").show();
        }
    });
    // 点击表示placeholder的标签相当于触发input
    $("span.placeholder").on("click", function() {
        $(this).hide();
        $(this).siblings("[placeholder]").trigger("click");
        $(this).siblings("[placeholder]").trigger("focus");
    });
}

然后把这个方法放在你需要的钩子方法里执行

openModal() {
    this.$nextTick(function() {
        function placeholderSupport() {
            return 'placeholder' in document.createElement('input');
        }
        if (!placeholderSupport()) { // 判断浏览器是否支持 placeholder
            this.addplaceholder();
        }
    }.bind(this));
}

在写入对应的样式即可，样式可以修改成自己想要的

#modifypwd input::-webkit-input-placeholder {
    /* WebKit browsers */
    color: #999;
}

#modifypwd input:-moz-placeholder {
    /* Mozilla Firefox 4 to 18 */
    color: #999;
}

#modifypwd input::-moz-placeholder {
    /* Mozilla Firefox 19+ */
    color: #999;
}

#modifypwd input::-ms-input-placeholder {
    /* Internet Explorer 10+ */
    color: #999;
}

#modifypwd .placeholder {
    position: absolute;
    top: 0px;
    left: 10px !important;
    z-index: 10;
    color: #aaaaaa;
}

由于不同浏览器的展现形式是不同的，IE这个大坑就是和其他浏览器不一样，主流浏览器都是输入事件触发的placeholder，而IE是聚焦事件触发的