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

我希望文本框的值字段中的文本在该文本框获得焦点时消失，然后在响应最终的模糊事件时重新出现-但前提是该值为空（即，如果用户在将焦点放入文本框后没有输入任何内容）。到目前为止，我有：

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);   
    });
});  

如果我在页面中只有一个元素，这个插件就可以工作。

---

如果我有两个元素，那么它就不起作用了。为什么会这样？

obj变量的作用域不是函数，而是全局作用域，因此只有一个变量——设置为应用插件的最后一个变量。使用

var

关键字将变量单独作用于匿名函数，以便插件应用于的每件事情都有一个变量。

您需要将插件与代码实现分开编写

您的插件将如下所示：

 (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，您需要在

obj

中包含

var

关键字。如果您的

obj

声明中没有

var

关键字，则只有最后一个文本框才具有水印效果。

谢谢大家的努力。我有时也在想为什么我们有时会使用var，现在我明白了