jquery-ui：检测输入的第一次变化答案

【问题标题】：jquery-ui : detect first time change in inputjquery-ui：检测输入的第一次变化
【发布时间】：2015-02-19 07:02:17
【问题描述】：

我正在尝试制作 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;           
              }           
          });   
        });
    });

在上面的代码中，我首先计算了没有。表单中的元素并设置相对长度（每个填充输入要增加的长度）。进度条随着输入值的变化而增加。如果输入值被清空（即空白），则减少。

这很好用，但问题是它每次都会检测到输入变化。因此，如果我填写输入并再次填写，那么进度条会再次增加。

是否有任何解决方案可以让我检测到输入的第一次更改并在更改后停止进度条？

【问题讨论】：

标签： javascript jquery html jquery-ui jquery-ui-progressbar

【解决方案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');
          }           
      });

找到工作代码here。

【讨论】：

【解决方案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);
                  }           
              });   
            });
        });

【讨论】：