ie_placeholder最佳兼容方案

https://gitee.com/hustcc/placeholder.js
巧妙的使用了canvas.toDataURL()，动态生成了一个背景图，可以作为兼容IE9-的placeholder方案。perfect！！！！！

基于这个可以对placeholder进行兼容，以下是扩展代码:

/**
 * Created by Administrator on 2017/7/18 0018.
 * Time: 16:11
 * https://gitee.com/hustcc/placeholder.js
 * version: 2018-1-11 16:14:47
 */
import placeholder from "placeHolder.js"
/**
 * 判断是否支持placeholder
 * @returns {boolean}
 */
var supportPlaceHoder = () => {
    return "placeholder" in document.createElement("input");
}
//placehoder默认配置
var defaultOption = {
    //我用的input是高度38的
    size: '200x38',
    bgcolor: 'rgba(0,0,0,0)',
    color: '#777777',
    fsize: '14',
    fweight: "normal",
    ffamily: "微软雅黑"
}
function cssValue2Num(cssValue) {
    return cssValue.replace("px", "") * 1;
}
/**
 * 根据placeholder长度计算宽度，生成背景图片
 * @param text
 * @param 扩展：textAlign placeholder文字是否input居中，默认靠右
 * @returns {*}
 */
var createPlaceHolderImg = function (textAlign) {
    var $self = $(this), text = $.trim($self.attr("placeholder")),
        imgWidth = (textAlign && textAlign === "center") ? $self.width() : (function () {
            //创建一个元素隐藏于页面，用来计算图片宽度
            var $span = $("<span>").addClass("placeholder-temp")
                .css("font-size", $self.css("font-size")).text(text);
            $("body").append($span);
            var width = $span.width();
            //获取padding和text-indent实现背景中文字的text-indent效果
            return $span.remove(), $span == null, width + cssValue2Num($self.css("text-indent")) * 2 + cssValue2Num($self.css("padding-left")) * 2;
        }());
    //创建节点，计算placeholder宽度
    return placeholder.getData($.extend(true, {}, defaultOption, {
        text: text,
        size: imgWidth + "x38",
        fsize: cssValue2Num($self.css("font-size"))
    }));
}
/**
 * 初始化placeholder
 */
var initPlaceHolder = () => {
    $(":text,textarea,:password").each(function (index, item) {
        var $item = $(item), val = $.trim($item.val()), placeholderText = $item.attr("placeholder");
        (!!placeholderText && (val === "" || val.length === 0)) && $item.attr("style", "background:url('" + createPlaceHolderImg.apply(item) + "') no-repeat left center;");
    })
    //keyup用来兼容IE9粘贴和backspace不触发change事件
        .on("input propertychange keyup blur", function (e) {
            var $this = $(this), val = $.trim($this.val());
            (val === "" || val.length === 0) ? $this.removeClass("no-placeholder") : $this.addClass("no-placeholder");
        });
}
$(function () {
    !supportPlaceHoder() && initPlaceHolder();
});

如果你的网站还在兼容IE9-，那么千万不要用value的方式进行兼容placeholder，一个简单的表单验证，一个简单的数据加密功能，都会让你死无葬身之地！！

如果你的网站还在兼容IE9-，那么千万不要用value的方式进行兼容placeholder，一个简单的表单验证，一个简单的数据加密功能，都会让你死无葬身之地！！

如果你的网站还在兼容IE9-，那么千万不要用value的方式进行兼容placeholder，一个简单的表单验证，一个简单的数据加密功能，都会让你死无葬身之地！！