如何让jQuery占位符/水印插件适用于ajax加载的文本字段

How to get jQuery placeholder/watermark plugin to work for ajax loaded text fields?

本文关键字:ajax 适用于 加载 字段 文本 插件 jQuery 占位符      更新时间:2023-09-26

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

(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 加载的文本字段上实现这种"水印"效果?

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

$(window).trigger('resize')

您可以在 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();
    });

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

相关文章: