placeholder补丁

/*
* 处理placeholder
* 处理对象：所以带有placeholder属性的input
* 处理逻辑：动态改变value值及颜色
*/
(function(jQuery) {

    jQuery.fn.placeholder = function() {
        var i = document.createElement('input'),
            placeholdersupport = 'placeholder' in i;
        if (!placeholdersupport) {
            var inputs = jQuery(this);
            inputs.each(function() {
                var input = jQuery(this),
                    text = input.attr('placeholder'),
                    pdl = 0,
                    height = input.outerHeight(),
                    width = input.outerWidth(),
                    placeholder = jQuery('<span class="phTips">' + text + '</span>');
                try {
                    pdl = input.css('padding-left').match(/\d*/i)[0] * 1;
                } catch (e) {
                    pdl = 5;
                }
                placeholder.css({
                    'margin': 0,
                    'margin-left': -(width - pdl),
                    'height': height,
                    'line-height': height + "px",
                    'position': 'absolute',
                    'color': "#cecfc9",
                    'bottom': 'auto',
                    'left': 'auto',
                    'top': 'auto',
                    'bottom': 'auto',
                    'font-size': "12px"
                });
                placeholder.click(function() {
                    input.focus();
                });
                if (input.val() !== "") {
                    placeholder.css({
                        display: 'none'
                    });
                } else {
                    placeholder.css({
                        display: 'inline'
                    });
                }
                placeholder.insertAfter(input);
                input.keyup(function(e) {
                    if (jQuery(this).val() !== "") {
                        placeholder.css({
                            display: 'none'
                        });
                    } else {
                        placeholder.css({
                            display: 'inline'
                        });
                    }
                });
            });
        }
        return this;
    };

    //初始化，也可以单独针对某一个设置
    jQuery('input[placeholder]').placeholder();

})($);

转载于:https://www.cnblogs.com/jiet/p/4955325.html