jquery ui:检测输入中的首次时间变化

jquery-ui : detect first time change in input

本文关键字：时间 变化 ui 检测 输入 jquery      更新时间：2024-01-10

我试图制作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;           
              }           
          });   
        });
    });

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

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

有没有什么解决方案可以让我检测到输入的第一次更改，并在更改后停止进度条的进度？

您可以做的是创建一个类，比如说"valid"，当用户输入了任何使输入元素有效的内容时，将该类添加到输入元素中，否则将其删除。

$(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');
          }           
      });

在此处查找工作代码。

您可以使用一个数组，当在输入字段中添加文本时添加一项，当输入字段变空时删除一项，如下所示-

    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);
                  }           
              });   
            });
        });
相关文章：