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(); })($);
相關文章
相關標籤/搜索