Question

我有一个JQuery插件，当焦点在它上面时会使文本框空白并重新绘制文本框，并在参数值上设置文本。我希望为我在我的页面上指定的每个文本框调用它，但只会调用我指定的最后一个文本框。

插件代码如下：

(function( $ ){

    $.fn.foco = function(value){

        if ( $(this).length ) {

                var text = {
                    texto:null
                    };
                enfocar = $.extend(text  , value);      

                $(this).val(enfocar.texto);

                $(this).focus(function(){
                    if($(this).val() == enfocar.texto)
                          $(this).val('');                      
                }).blur(function(){
                    if($(this).val() == '')
                        $(this).val(enfocar.texto);                     
                });             


        } else {

                return false;

        }

    }

})( jQuery );

以这种方式调用我的页面：

('#start').foco({texto:'Enter the start text'}); //Works fine

但是当我试图不止一次地打电话时：

('#start').foco({texto:'Enter the start text'}); //Doesn't work
('#end').foco({texto:'Enter the end text'});     //Does work

我想知道你们是否可以帮助我弄清楚如何才能实现这一点。

Answer 1

我会将其转变为“传统的多元素模型”（不是实际的关键字，而是我认为的传统方法）。基本上，在你的插件中，你想循环遍历集合中指定的各种元素（由选择器）。此外，为了允许链接，我们返回此元素，以便我们继续前进。 e.g。

;(function($){
  $.fn.foco = function(opts){

    var defaultOpts = {
      texto: null
    };
    opts = $.extend({}, defaultOpts, opts);

    // here's where we return the collection back. But, at the same time we
    // iterate over the collection of matched elements
    return this.each(function(i,e){

      var el = $(this);

      // insert handling code here, based on "el" is
      // the element in question

    });
  };
})(jQuery);


// implementation:
$('#a').texto({ texto: 'Search...' }); // single element
$('.required').texto({ texto: '(required)' }); // multiple elements

但是，正如@Stefan在评论中提到的那样，watermark可能是一条更好的路线（不要重新发明轮子）。 HTML5有一个新的“占位符”属性，可以保持原生状态。并且，在不受支持的情况下，它将恢复为JS代码。但是，如果不使用JS，当你没有直接管理占位符/水印文本时，你将很难设置它的样式。

-

我的出价（with example）以防你好奇：

(function($){
    $.fn.texto = function(watermark){
        return this.each(function(){
            var $el = $(this);

            // optional class name we can apply while they're watermarked.
            var watermarkClass = 'watermarked';

            $el.focus(function(){
                if ($el.val() == watermark){
                    $el.val('')

                    // adding the class is optional, but decorative
                    $el.removeClass(watermarkClass );
                }
            }).blur(function(){
                if ($el.val() == ''){
                    $el.val(watermark);

                    // remove the class (again, optional)
                    $el.addClass(watermarkClass );
                }
            });

            // intitial setup
            if ($el.val() == '')
            {
                $el.val(watermark);

                // once again, class is optional
                $el.addClass(watermarkClass );
            }
        });
    };
})(jQuery);

$('.texto').texto('Enter text...');

Answer 2

您的enfocar是全球性的。让它成为当地人。

var enfocar;

你的插件应该使用这样的.each：

(function ($) {
    $.fn.foco = function (value) {
        return this.each(function() {
            var text = { texto: null },
                enfocar = $.extend(text, value);

            $(this).val(enfocar.texto)
                   .focus(function () {
                       if ($(this).val() == enfocar.texto) $(this).val('');
                   }).blur(function () {
                       if ($(this).val() == '') $(this).val(enfocar.texto);
                   });
        });
    };
})(jQuery);

我的页面上不会多次调用JQuery插件

2 个答案: