码迷,mamicode.com
首页 > Web开发 > 详细

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

时间:2014-11-26 18:47:40      阅读:261      评论:0      收藏:0      [点我收藏+]

标签:style   blog   http   io   ar   color   sp   for   on   

调用时直接引用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);

 

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

标签:style   blog   http   io   ar   color   sp   for   on   

原文地址:http://www.cnblogs.com/rocdavid/p/4123800.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!