为什么我的jQuery插件用于删除焦点上的文本并重新添加模糊不起作用?

时间:2009-11-10 01:49:56

标签: javascript jquery html dom

我希望文本框的值字段中的文本在该文本框获得焦点时消失,然后重新出现以响应最终的模糊事件 - 但仅当值为空时(即,如果用户)将焦点放入文本框后没有输入任何内容)。到目前为止,我有这个:

this.each(function() {  
    obj = $(this);
    var initialText = obj.val();

    obj.focus(function () { 
        if(obj.val() === initialText)
            obj.val("");    
    });


    obj.blur(function () { 
        if(obj.val() ==="")
            obj.val(initialText);   
    });
});  

如果页面中只有一个元素,则此插件可以正常工作。 如果我有两个元素,那么它不起作用。为什么会这样?

2 个答案:

答案 0 :(得分:2)

obj变量没有作用于函数,它是全局范围的,所以只有其中一个 - 设置为插件应用的最后一个。使用var关键字将变量范围仅限于匿名函数,以便插件应用于每个事物。

答案 1 :(得分:0)

您需要从代码实现中单独编写插件。

你的插件看起来像这样:

 (function($) {
    $.fn.watermark = function() {  

       return this.each(function() {         
          var obj = $(this);
          var initialText = obj.val();

          obj.focus(function () { 
            if(obj.val() === initialText)
               obj.val(""); 
          });

         obj.blur(function () { 
            if(obj.val() ==="")
                obj.val(initialText);   
         });
       });
    };
 })(jQuery);  

然后使用你的插件:

$(document).ready(function() {

    $('.watermark').watermark();

});

此外,作为tvanfosson,您需要在var上添加obj关键字。如果您的var声明中没有obj关键字,则只有最后一个文本框会产生水印效果。