HTML5在IE下兼容placeholder属性的jquery插件

折腾一下午，总算解决了这个比较蛋疼的问题。

前端用的bootstrap做的，所以很多html5

结果到ie下面一测，乖乖。不得了，所有的input里面的placeholder等都出不来了。

哭吧。

 

百度关键词 jquery html5 placeholder 查找

 

果然都是高手，还有很多类似问题。

 

找了好多。发现个还算圆满的。这不得不再次感谢我们伟大的互联网啊。

 

下面是代码：

 

$.fn.extend({
    /**
     * 该方法为了解决不支持placeholder属性的浏览器下达到相似效果作用
     * @param _color 文本框输入字体颜色,默认黑色
     * @param _plaColor 文本框placeholder字体颜色，默认灰色#a3a3a3
     */
    inputTip: function (_color, _plaColor) {
        _color = _color || "#000000";
        _plaColor = _plaColor || "#a3a3a3";
        function supportsInputPlaceholder() { // 判断浏览器是否支持html5的placeholder属性
            var input = document.createElement('input');
            return "placeholder" in input;
        }

        function showPassword(_bool, _passEle, _textEle) { // 密码框和文本框的转换
            if (_bool) {
                _passEle.show();
                _textEle.hide();
            } else {
                _passEle.hide();
                _textEle.show();
            }
        }

        if (!supportsInputPlaceholder()) {
            this.each(function () {
                var thisEle = $(this);
                var inputType = thisEle.attr("type")
                var isPasswordInput = inputType == "password";
                var isInputBox = inputType == "password" || inputType == "text";
                if (isInputBox) { //如果是密码或文本输入框
                    var isUserEnter = false; // 是否为用户输入内容,允许用户的输入和默认内容一样
                    var placeholder = thisEle.attr("placeholder");

                    if (isPasswordInput) { // 如果是密码输入框
                        //原理：由于input标签的type属性不可以动态更改，所以要构造一个文本input替换整个密码input
                        var textStr = "<input type='text' class='" + thisEle.attr("class") + "' style='" + (thisEle.attr("style") || "") + "' />";
                        var textEle = $(textStr);
                        textEle.css("color", _plaColor).val(placeholder).focus(
                            function () {
                                thisEle.focus();
                            }).insertAfter(this);
                        thisEle.hide();
                    }
                    thisEle.css("color", _plaColor).val("");//解决ie下刷新无法清空已输入input数据问题
                    if (thisEle.val() == "") {
                        thisEle.val(placeholder);
                    }
                    thisEle.focus(function () {
                        if (thisEle.val() == placeholder && !isUserEnter) {
                            thisEle.css("color", _color).val("");
                            if (isPasswordInput) {
                                showPassword(true, thisEle, textEle);
                            }
                        }
                    });
                    thisEle.blur(function () {
                        if (thisEle.val() == "") {
                            thisEle.css("color", _plaColor).val(placeholder);
                            isUserEnter = false;
                            if (isPasswordInput) {
                                showPassword(false, thisEle, textEle);
                            }
                        }
                    });
                    thisEle.keyup(function () {
                        if (thisEle.val() != placeholder) {
                            isUserEnter = true;
                        }
                    });
                }
            });
        }
    }
});

$(function () {
    $("input").inputTip();  // 调用inputTip方法
    $("input[type='button']").focus();  // 页面打开后焦点置于button上，也可置于别处。否则IE上刷新页面后焦点在第一个输入框内造成placeholder文字后紧跟光标现象
});

 

 

代码引用的方式为:

<!--[if lt IE 9]>
<script src="assets/js/jquery-placeholder.js"></script>
<![endif]-->

 

打完收工，叔也很累了。现在还捣腾这些前段。木有美工，真蛋疼~~~