JQuery-UI: обнаружить первое изменение ввода

Question

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

HTML:

    <div id="progress" class="progress"></div>
   //form and inputs

сценарий:

$(document).ready(function(){

    var elementcount = document.getElementById("events").length;

    var totallength = 100;

    var relativelength = totallength/elementcount;

    var initial = 0;

    $('#progress').progressbar({
        value: initial,     
    });

    $('#events').find(':input').each(function(){    

          $(this).change(function(){

              if($(this).val()==""){                  
                     var value =   initial - relativelength;
                     $('#progress').progressbar("value",value);
                     initial = value;
              }           
              else{               
                  var value =   initial + relativelength;
                  $('#progress').progressbar("value",value);
                  initial = value;           
              }           
          });   
        });
    });

В приведенном выше коде я сначала посчитал нет. элементов в форме и установите относительную длину (длина, которая будет увеличена для каждого заполненного ввода). Индикатор выполнения увеличивается для изменения входного значения. Если входное значение пустое (т. Е. Пустое), то оно уменьшается.

Это работает нормально, но проблема в том, что он обнаруживает изменения каждый раз при изменении ввода. Так что, если я заполняю ввод и заполняю его второй раз, то снова индикатор выполнения увеличивается.

Есть ли какое-либо решение, с помощью которого я могу обнаружить первое изменение ввода и остановить прогресс-бар, прогрессирующий после этого изменения?

Answer 1

Что вы можете сделать, это сделать класс, скажем, "действительным", когда пользователь ввел все, что делает входной элемент действительным, затем добавьте этот класс в элемент ввода, в противном случае удалите его.

$(this).change(function(){

          if($(this).val()==""){                  
                 var value =   initial - relativelength;
                 $('#progress').progressbar("value",value);
                 initial = value;
                 $(this).removeClass('valid');
          }           
          else if(!$(this).hasClass('valid')){               
              var value =   initial + relativelength;
              $('#progress').progressbar("value",value);
              initial = value;
              $(this).addClass('valid');
          }           
      });   

Найдите рабочий код здесь.

Answer 2

Вы можете использовать массив, который добавляет один элемент, когда текст был добавлен в поле ввода, и удаляет один элемент, когда поле ввода становится пустым, как это

    var items = [];
    $('#events').find(':input').each(function(){    
              $(this).change(function(){
                  if($(this).val()==""){                  
                         items.slice(0);
                         $('#progress').progressbar("value",items.length);
                  }           
                  else{               
                      items.push('1');
                      $('#progress').progressbar("value",items.length);
                  }           
              });   
            });
        });