為什么我的jQuery插件無法刪除焦點上的文本並在模糊時重新添加文本？

Question

我希望當該文本框獲得焦點時，該文本框的value字段中的文本消失，然后響應最終的模糊事件而重新出現-但前提是該值是空的（即，如果用戶沒有將焦點放在文本框中后輸入任何內容）。 到目前為止，我有這個：

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

如果頁面中只有一個元素，則此插件有效。 如果我有兩個元素，那就行不通了。 為什么會這樣呢？

Answer 1

obj變量沒有作用於函數，而是全局作用域，因此只有其中一個-設置為插件應用的最后一個變量。 使用var關鍵字將變量的作用域僅限定於匿名函數，以便對插件應用的每一件事都有一個。

Answer 2

您需要將插件與代碼實現分開編寫。

您的插件如下所示：

 (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關鍵字，則只有最后一個文本框具有水印效果。