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

当用户输入任何使输入元素有效的内容时，你可以做一个类，比如'有效'，然后将该类添加到input元素中，否则将其删除。

$(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。

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);
                  }           
              });   
            });
        });

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

2 个答案: