Javascript/JQuery Progress bar

Question

Я создал индикатор выполнения, который в основном работает.

Html выглядит следующим образом:

<div class="progress"> 
     <div class="progress-bar progress-bar-striped active" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width:40%"> 
     </div> 
</div> 

И мой сценарий так:

/* Progress bar */ 
$("#project_name").blur(function(){ 
    /* if input not empty progress */ 
    if($(this).val() !== '' && $(this).val().length > 1) { 
     console.log("already written" + $(this).val().length); 
    } else if($(this).val() !== '') { 
     var progressbar = $('.progress-bar'); 
     progressbar.width(progressbar.width() + 40); 

     console.log("not empty" + $(this).val().length); 
    } else { 
     console.log("empty"); 
    } 

}); 

Если поле ввода имеет значение барные увеличивается прогресс, если щелчок где-то после этого.

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

Итак, я сделал заявление if, которое должно решить, но это не так.

Это:

if($(this).val() !== '' && $(this).val().length > 0) { 
    console.log("already written" + $(this).val().length); 
} 

Но она по-прежнему не работает. Если я увеличиваю значение ввода, он больше не увеличивает индикатор выполнения, но если я сохраню значение, которое я не увеличиваю, индикатор выполнения продолжает увеличиваться, если я нажимаю и выключаю.

Answer 1

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

Более подробное объяснение.

Способ отслеживания того, увеличилось ли значение длины, путем установки старой длины при выборе входа (что и происходит с помощью события .focus).

Когда вход теряет фокус (.blur событие) в соответствии с исходным вопросом, старая длина сравнивается с новой длиной, если она увеличена, тогда мы выбираем индикатор выполнения, но только если мы ранее не увеличивали его (так как мы добавляем класс «увеличен», когда мы его увеличиваем).

Теперь для обратного, мы проверяем, пуст ли вход. Если раньше мы увеличивали индикатор выполнения (он увеличивал класс), мы уменьшаем его и удаляем этот класс.

//Store old value length 
$("#project_name").focus(function() { 
    $(this).data("oldLen",$(this).val()?$(this).val().length:0); 
}); 

$("#project_name").blur(function(){ 
    var oldLen = $(this).data("oldLen") || 0; //Recall old length 
    if($(this).val().length > oldLen) { //Check if input is now longer 
     var progressbar = $('.progress-bar:not(.increased)'); 
     if (progressbar.length > 0) { 
      progressbar.width(progressbar.width() + 40); 
      progressbar.addClass("increased");   
      console.log("Input increased from "+oldLen +" to "+$(this).val().length); 
     } 
    } else if ($(this).val() == '') { 
     var progressbar = $('.progress-bar.increased'); 
     if (progressbar.length > 0) { 
      progressbar.width(progressbar.width() - 40); 
      progressbar.removeClass("increased");   
      console.log("Input decreased from "+oldLen +" to "+$(this).val().length); 
     } 

    } 
}); 

Более обобщенное решение для нескольких элементов ввода. Здесь предполагается, что вы увеличиваете прогресс для каждого элемента, когда в нем есть данные. Изменение здесь заключается в том, что вы отслеживаете увеличение шага выполнения через «заполненный» класс на входе и только увеличиваете прогресс, если вход не был заполнен раньше.

//Not checking on length, just checking if more than 0 
$("input").blur(function(){ // You can use other selectors for specific inputs like e.g. "#input1, #input2..." 
    if($(this).val().length > 0 && !$(this).is("filled")) { //Check if input is now filled 
     var progressbar = $('.progress-bar'); 
     progressbar.width(progressbar.width() + 40); 
     $(this).addClass("filled"); //Mark input as filled      

    } else if ($(this).val() == '' && $(this).is(".filled")) { 
     var progressbar = $('.progress-bar'); 
     progressbar.width(progressbar.width() - 40); 
     $(this).removeClass("filled"); //Mark as unfilled  
    } 
});