Заполнитель для элементов формы с использованием Jquery - PullRequest
Новая
       11

Заполнитель для элементов формы с использованием Jquery

2 голосов
/ 13 июня 2011

Ну, для начала, я хотел бы отметить, что цель этого вопроса не в том, чтобы спросить, как это делается, а в том, чтобы понять, почему то, как я это сделал, работает.

Я хотел создать текстовые заполнители для элементов формы, и во время игры с jquery я придумал следующий код: 

function placehold(id,placeholder) // id of element and placeholder text
{
    $("#"+id).val(placeholder); //initialize form field

    $("#"+id).focusin(function() //on focus
    {
        if ($(this).val()==(placeholder))
        {
            $(this).val(null); 
            /*if input's value is placeholder then empty
              input and wait for value */
        }        
    });


    $("#"+id).focusout(function() //on lost focus
    {
        if ($(this).val()==(""))
        {
            $(this).val(placeholder); //reset val to placeholder text if empty
        }        
    });
}

И это будет работать, даже если я вызову функцию в нескольких полях, например, 

placehold('uname','Please enter a username');
placehold('pword','Please enter a password);
placehold('email','Please enter an email address');

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

Спасибо за ваше время и помощь:)

1 Ответ

3 голосов
/ 13 июня 2011

является экземпляром функции, сохраняемой для каждого поля, с которым она связана?

Да.Для каждого вызова placehold() создаются новые функции обработчика событий.Значения id и placeholder сохраняются как часть созданных вами замыканий.

, если да. Будет ли это иметь какое-либо влияние на производительность в долгосрочной перспективе?1013 * Как вы это сделали, с каждым элементом, который вы называете placehold(), связаны небольшие накладные расходы.Я бы не беспокоился об этом, хотя, это действительно незначительно.

Лучше было бы повторно использовать функции обработки событий: 

function placeholderEmpty() { 
    var $this = $(this);
    if ( $this.val() == $this.data("placeholder") ) {
        $this.val(""); 
    }        
}
function placeholderDefault() {
    var $this = $(this);
    if ( $this.val() == "" ) {
        $this.val( $this.data("placeholder") ); 
    }        
}

function placehold(id,placeholder) {
  $("#"+id).data("placeholder", placeholder) 
  .focusin(placeholderEmpty)
  .focusout(placeholderDefault)
  .trigger("focusout");
}

Следующим шагом будет плагин ( обратите внимание на использование другого замыкания ):

$.fn.extend({
  placehold: function () {
    var placeholderEmpty   = function () { /* ... */ };
    var placeholderDefault = function () { /* ... */ };

    return function(placeholder) {
      this.data("placeholder", placeholder) 
      .focusin(placeholderEmpty)
      .focusout(placeholderDefault)
      .trigger("focusout");
      return this; 
    }
  }();
});

использовать как 

$('#uname').placehold('Please enter a username');
$('#pword').placehold('Please enter a password');
$('#email').placehold('Please enter an email address');
$('.manyTextFields').placehold('All get the same text & behavior.');
...