Почему мой плагин jQuery для удаления текста в фокусе и его повторного добавления при размытии не работает?

Question

Я хотел бы, чтобы текст в поле значения текстового поля исчезал, когда это текстовое поле получает фокус, а затем появлялся снова в ответ на возможное событие размытия - но только если значение пустое (то есть, если пользователь ничего не вводил после помещения фокуса в текстовое поле). Пока у меня есть это:

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 вы захотите включить ключевое слово var в obj. Если у вас нет ключевого слова var в объявлении obj, только последнее текстовое поле будет иметь эффект водяного знака.