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，一个简单的表单验证，一个简单的数据加密功能，都会让你死无葬身之地！！

秒客网

ie_placeholder最佳兼容方案

相关文章