0

我正在使用以下占位符插件

(function($){

    var ph = "PLACEHOLDER-INPUT";
    var phl = "PLACEHOLDER-LABEL";
    var boundEvents = false;
    var default_options = {
        labelClass: 'placeholder'
    };

    //check for native support for placeholder attribute, if so stub methods and return
    var input = document.createElement("input");
    if ('placeholder' in input) {
        $.fn.placeholder = $.fn.unplaceholder = function(){}; //empty function
        delete input; //cleanup IE memory
        return;
    };
    delete input;

    //bind to resize to fix placeholders when the page resizes (fields are hidden/displayed, which can change positioning).
    $(window).resize(checkResize);


    $.fn.placeholder = function(options) {
        bindEvents();

        var opts = $.extend(default_options, options)

        this.each(function(){
            var rnd=Math.random().toString(32).replace(/\./,'')
                ,input=$(this)
                ,label=$('<label style="position:absolute;display:none;top:0;left:0;"></label>');

            if (!input.attr('placeholder') || input.data(ph) === ph) return; //already watermarked

            //make sure the input tag has an ID assigned, if not, assign one.
            if (!input.attr('id')) input.attr('id', 'input_' + rnd);

            label   .attr('id',input.attr('id') + "_placeholder")
                    .data(ph, '#' + input.attr('id'))   //reference to the input tag
                    .attr('for',input.attr('id'))
                    .addClass(opts.labelClass)
                    .addClass(opts.labelClass + '-for-' + this.tagName.toLowerCase()) //ex: watermark-for-textarea
                    .addClass(phl)
                    .text(input.attr('placeholder'));

            input
                .data(phl, '#' + label.attr('id'))  //set a reference to the label
                .data(ph,ph)        //set that the field is watermarked
                .addClass(ph)       //add the watermark class
                .after(label)       //add the label field to the page

            //setup overlay
            itemFocus.call(this);
            itemBlur.call(this);
        });
    };

    $.fn.unplaceholder = function(){
        this.each(function(){
            var input=$(this),
                label=$(input.data(phl));

            if (input.data(ph) !== ph) return;

            label.remove();
            input.removeData(ph).removeData(phl).removeClass(ph).unbind('change',itemChange);
        });
    };

    function bindEvents() {
        if (boundEvents) return;

        //prepare live bindings if not already done.
        $("form").live('reset', function(){
            $(this).find('.' + ph).each(itemBlur);
        });
        $('.' + ph)
            .live('keydown',itemFocus)
            .live('mousedown',itemFocus)
            .live('mouseup',itemFocus)
            .live('mouseclick',itemFocus)
            .live('focus',itemFocus)
            .live('focusin',itemFocus)
            .live('blur',itemBlur)
            .live('focusout',itemBlur)
            .live('change',itemChange);
            ;
        $('.' + phl)
            .live('click', function() {  $($(this).data(ph)).focus(); })
            .live('mouseup', function() {  $($(this).data(ph)).focus(); });
        bound = true;

        boundEvents = true;
    };

    function itemChange() {
        var input = $(this);
        if (!!input.val()) {
            $(input.data(phl)).hide();
            return;
        }
        if (input.data(ph+'FOCUSED') != 1) {
            showPHL(input);
        }
    }

    function itemFocus() {
        $($(this).data(ph+'FOCUSED',1).data(phl)).hide();
    };

    function itemBlur() {
        var that = this;
        showPHL($(this).removeData(ph+'FOCUSED'));

        //use timeout to let other validators/formatters directly bound to blur/focusout work
        setTimeout(function(){
            var input = $(that);

            //if the item wasn't refocused, test the item
            if (input.data(ph+'FOCUSED') != 1) {
                showPHL(input);
            }
        }, 200);
    };

    function showPHL(input, forced) {
        var label = $(input.data(phl));

        //if not already shown, and needs to be, show it.
        if ((forced || label.css('display') == 'none') && !input.val())
            label
                .text(input.attr('placeholder'))
                .css('top', input.position().top + 'px')
                .css('left', input.position().left + 'px')
                .css('display', 'block');

        //console.dir({ 'input': { 'id':input.attr('id'), 'pos': input.position() }});
    }

    var cr;
    function checkResize() {
        if (cr) window.clearTimeout(cr);
        cr = window.setTimeout(checkResize2, 50);
    }
    function checkResize2() {
        $('.' + ph).each(function(){
            var input = $(this);
            var focused = $(this).data(ph+'FOCUSED');
            if (!focused) showPHL(input, true);
        });
    }

}(jQuery));

它将占位符属性应用于本身不支持占位符属性的浏览器中的表单字段（例如 IE9）。它适用于静态加载的文本字段，但是对于通过 ajax 加载的文本字段，占位符不会出现。

是否可以在通过 ajax 加载的文本字段上实现这种“水印”效果？

4

2 回答 2

1

您可以在 AJAX 调用完成后将该插件应用于新创建的控件。请原谅伪代码，因为我不太确定您的 AJAX 调用是如何工作的：

$.ajax({
  url: "test.html",
  cache: false
}).done(function( result ) {
  field = $('<input>').html(result);
  $("#results").append(field);
  field.placeholder();
});

另一种选择是您可以使用 jQuery 的.on()方法将动态创建的控件绑定到函数——但它需要一个事件（如单击）。我不确定你会怎么做。也许是这样的：

   $( 'body' ).on('click','input.addField', function(e){
        $(this).placeholder();
    });

我知道这行不通，但也许它可以帮助您集思广益。

于 2012-04-17T04:55:17.203 回答
1

如果在添加新输入后触发窗口调整大小功能会发生什么？

$(window).trigger('resize')

于 2012-04-17T04:58:21.513 回答