完美让IE兼容input placeholder属性的jquery实现

调用时直接引用jquery与下面的js就行了,相对网上的大多数例子来说,这个是比较完美的方案。

/*

* 球到西山沟

* http://www.cnzj5u.com

* 2014/11/26 12:12

*/

(function ($) {



    //判断是否支持placeholder

    function isPlaceholer() {

        var input = document.createElement("input");

        return "placeholder" in input;

    }



    var placeholderfriend = {

        focus: function (s) {

            s = $(s).hide().prev().show().focus();

        }

    }



    //不支持的代码

    if (!isPlaceholer()) {

        $(function () {

            var form = $(this);



            var elements = form.find("input[placeholder]");



            elements.each(function (i) {

                var s = $(this);

                var pValue = s.attr("placeholder");

                var sValue = s.val();

                if (pValue) {

                    if (sValue == "") {

                        //DOM不支持type的修改,需要复制密码框属性,生成新的DOM

                        var html = this.outerHTML || "";

                        html = html

                            .replace(/\s*type=(['"])?password\1/gi, " type=\"text\" ")

                            .replace(/\s*value=(['"])?\S*\1?/gi, " value=\"" + pValue + "\" onfocus=\"phfrfocus(this);\" style=\"color:#a9a9a9;\" ");

                        s.hide();

                        s.after(html);

                    }

                }

            });



            elements.blur(function () {

                var s = $(this);

                var sValue = s.val();

                if (sValue == "") {

                    s.hide().next().show();

                }

            });



        });

    }

    window.phfrfocus = placeholderfriend.focus;

})(jQuery);

 

你可能感兴趣的:(placeholder)