Блог

Я новичок в написании плагинов jQuery, поэтому я немного не уверен, как это сделать. Плагин предназначен для отображения меток в виде подсказок внутри текста и ввода пароля. Это довольно просто — в фокусе элемента метка скрыта. Также при загрузке документа он проверяет, автоматически ли браузер заполнил какие-либо формы полей — если да, то метка скрыта. Проблема, с которой я сталкиваюсь, заключается в автозаполнении других полей. Чтобы решить эту проблему, я пытаюсь привязать функцию к событиям onblur и keyup элемента, чтобы выполнять цикл по другим элементам формы и определять, были ли они автоматически завершены.

Вот аннотированный код.

 (function( $ ){
  $.fn.innerLabels = function( ) {
    return this.each(function() {        
    var $this = $(this);
// Initialise all form elements with class
    $this.each(function() {
    var lngth = $(this).val().length;
    if(lngth > 0){
        $(this).parent().children('label').hide();
    }else{
        $(this).parent().children('label').show();
    };
    });
// onfocus event - clears label
    $this.focus(function() {
    $this.parent().children('label').hide();
    });
// onblur/keyup event re-enstates label if length of value is zero or hides if autocompleted.
    $this.bind("blur keyup",function() {
// check all fields in case of autocomplete <- this is the problem
    $(this).each(function() {
    var lngth = $(this).val().length;
    //alert(lngth);
    if(lngth > 0){
        $(this).parent().children('label').hide();
    }else{
        $(this).parent().children('label').show();
    };
    });
    });
    });
  };
})( jQuery );
  

Это запускается при выполнении этого.

 $(document).ready(function(){
     $('.txtbox').innerLabels();
});
  

.txtbox — это класс, который я добавляю для формирования текстовых полей и полей пароля, в которых я хочу это использовать.

Я думаю, что это проблема области видимости. Последний $ (this).проблема в каждом из них. Вместо того, чтобы выполнять цикл по всем элементам с классом .txtbox, он выполняет цикл по значению входных данных, в которых происходит событие. Я не хочу добавлять имя класса к подключаемому модулю, потому что это добавит дополнительный код и сделает его менее гибким.

Любой совет по этому поводу был бы оценен.

Приветствия

Грег

Просто взглянув на ваш код, кажется, что вы пытаетесь снова выполнить код инициализации при размытии. Так ли это? Если это так, преобразуйте этот общий код в функцию и просто вызовите его из вашего обработчика событий:

 (function($) {
    $.fn.innerLabels = function() {
        var $self = this;
        var hideElements = function() {
            $self.each(function() {
                var lngth = $(this).val().length;
                if (lngth > 0) {
                    $(this).parent().children('label').hide();
                } else {
                    $(this).parent().children('label').show();
                };
            });  
        };

        hideElements();

        return $self.focus(function() {
            $(this).parent().children("label").hide();
        }).bind("blur keyup", hideElements);
    };
})(jQuery);
  

После некоторого рефакторинга я также не увидел необходимости в .each вызове (в return инструкции), поскольку назначение обработчиков событий будет работать для каждого элемента в наборе сопоставленных элементов.

Надеюсь, это то, что вам было нужно.

В jquery вы можете выбрать братьев и сестер с помощью функции next()

 $(this).next()
  

выберет следующий.

Подробнее о next()