首页 > 技术文章 > placeholder IE兼容,显示password

futai 2016-01-06 16:06 原文

从网上找了很多关于placeholder IE兼容性的问题,下边的这个js方法可以显示password。

 

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Placeholder Polyfill Test</title>
</head>
<body>

<form>
<input type="password"placeholder="password">
<input type="password"placeholder="confirm password">
</form>

<script src="http://code.jquery.com/jquery-1.10.0.min.js"></script>
<script>

/* placeholder polyfill plugin */

/*! http://mths.be/placeholder v2.0.7 by @mathias */
(function(f, h, $) {
    var a='placeholder'in h.createElement('input'), d='placeholder'in h.createElement('textarea'), i=$.fn, c=$.valHooks, k, j;

    if(a&&d) {
        j=i.placeholder=function() {
            return this
        }
        ;
        j.input=j.textarea=true
    }
    else {
        j=i.placeholder=function() {
            var l=this;

            l.filter((a?'textarea':':input')+'[placeholder]').not('.placeholder').bind( {
                'focus.placeholder':b, 'blur.placeholder':e
            }
            ).data('placeholder-enabled', true).trigger('blur.placeholder');
            return l
        }
        ;
        j.input=a;
        j.textarea=d;

        k= {
            get:function(m) {
                var l=$(m);
                return l.data('placeholder-enabled')&&l.hasClass('placeholder')?'':m.value
            }
            , set:function(m, n) {
                var l=$(m);

                if(!l.data('placeholder-enabled')) {
                    return m.value=n
                }
                if(n=='') {
                    m.value=n;

                    if(m!=h.activeElement) {
                        e.call(m)
                    }
                }
                else {
                    if(l.hasClass('placeholder')) {
                        b.call(m, true, n)||(m.value=n)
                    }
                    else {
                        m.value=n
                    }
                }
                return l
            }
        }
        ;
        a||(c.input=k);
        d||(c.textarea=k);

        $(function() {
            $(h).delegate('form', 'submit.placeholder', function() {
                var l=$('.placeholder', this).each(b);

                setTimeout(function() {
                    l.each(e)
                }
                , 10)
            }
            )
        }
        );

        $(f).bind('beforeunload.placeholder', function() {
            $('.placeholder').each(function() {
                this.value=''
            }
            )
        }
        )
    }
    function g(m) {
        var l= {
        }
        , n=/^jQuery\d+$/;

        $.each(m.attributes, function(p, o) {
            if(o.specified&&!n.test(o.name)) {
                l[o.name]=o.value
            }
        }
        );
        return l
    }
    function b(m, n) {
        var l=this, o=$(l);

        if(l.value==o.attr('placeholder')&&o.hasClass('placeholder')) {
            if(o.data('placeholder-password')) {
                o=o.hide().next().show().attr('id', o.removeAttr('id').data('placeholder-id'));

                if(m===true) {
                    return o[0].value=n
                }
                o.focus()
            }
            else {
                l.value='';
                o.removeClass('placeholder');
                l==h.activeElement&&l.select()
            }
        }
    }
    function e() {
        var q, l=this, p=$(l), m=p, o=this.id;

        if(l.value=='') {
            if(l.type=='password') {
                if(!p.data('placeholder-textinput')) {
                    try {
                        q=p.clone().attr( {
                            type: 'text'
                        }
                        )
                    }
                    catch(n) {
                        q=$('<input>').attr($.extend(g(this) {
                            type: 'text'
                        }
                        ))
                    }
                    q.removeAttr('name').data( {
                        'placeholder-password':true, 'placeholder-id':o
                    }
                    ).bind('focus.placeholder', b);

                    p.data( {
                        'placeholder-textinput':q, 'placeholder-id':o
                    }
                    ).before(q)
                }
                p=p.removeAttr('id').hide().prev().attr('id', o).show()
            }
            p.addClass('placeholder');
            p[0].value=p.attr('placeholder')
        }
        else {
            p.removeClass('placeholder')
        }
    }
}
(this, document, jQuery));
</script>
<script> $('input').placeholder();
</script>
</body>
</html>

转自这里 http://zach.lysobey.com/files/placeholder/index.html

推荐阅读