Как обнаружить изменения в поле ввода текста в jQuery - PullRequest
Новая
       55

Как обнаружить изменения в поле ввода текста в jQuery

0 голосов
/ 24 октября 2019

У меня есть два текстовых поля ввода текста, и я хочу сделать сумму всего, что не введено пользователем. Ниже мой код: 

$(document).ready(function(){
    var total = 0;
    $(".test").on("input", function(){
        // Print entered value in a div box
        total += parseInt($(this).val());
        $("#result").text(	total);
    });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p><input type="text" class="test" placeholder="Type something..." id="myInput"></p>
    <p><input type="text" class="test" placeholder="Type something..." id="myInput"></p>
    <div id="result"></div>

Когда я сначала ввожу 10, тогда это займет 11, затем, если я введу 100, тогда это займет 111, я не понимаю, почему этопроисходит. Где я делаю ошибку, укажи мне?

Ответы [ 5 ]

3 голосов
/ 24 октября 2019

В вашем коде, когда вы вводите первую цифру, он был рассчитан до суммы из-за вашего кода total += parseInt($(this).val()). например, если вы нажмете первую цифру как 1, то в это время итоговое значение обновляется как total = total + 1, что равно 1, при втором нажатии клавиши, например, принимается 0, тогда ваше входное значение становится равным 10. оно вычисляется до текущего итогазначение как total = total + 10. вот почему вы получаете 11 в качестве ответа

Попробуйте вот так. 

$(document).ready(function(){
$(".test").on("input", function(){
    let total = 0;
    $('.test').each(function() {
      if (!isNaN(parseInt($(this).val()))) {
        total += parseInt($(this).val());
      }
    });
    $("#result").text(total);
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p><input type="text" class="test" placeholder="Type something..." id="myInput1"></p>
<p><input type="text" class="test" placeholder="Type something..." id="myInput2"></p>
<div id="result"></div>
1 голос
/ 24 октября 2019

Вы просто обновляете итоговое значение тем входным значением, которое пытаетесь изменить.

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

Попробуйте код ниже - 

$(document).ready(function() {
  $(".test").on("change", function() {
    var total = 0;
    $('.test').each(function() {
      if (!isNaN(parseInt($(this).val()))) {
        total += parseInt($(this).val());
      }
    });
    // Print entered value in a div box

    $("#result").text(total);
  });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p><input type="text" class="test" placeholder="Type something..." id="myInput"></p>
<p><input type="text" class="test" placeholder="Type something..." id="myInput"></p>
<div id="result"></div>
1 голос
/ 24 октября 2019

Причина, по которой он не показал желаемый результат, состоит в том, что расчет неверен. Теперь вы добавляете число к итогу каждый раз, когда изменяется одно поле ввода. Поэтому, если вы наберете 123, это займет 0 + 1, затем 1 + 12, затем 13 + 123, и в результате вы получите 136.

Я написал возможное решение для вашего вопроса. Код приведен в скрипте ниже.

Вы можете добавить функцию, в которой вы вычисляете сумму всех полей ввода (может быть больше 2, она общая). 

function calculateTotal(){
  var total = 0;
    $(".test").each(function( index ) {
      var value = $(this).val();
      if(value == ""){
        return;
      }
      total += parseInt(value);

    });
  $("#result").text(total);
}

И вкл. изменение ваших полей ввода, вы просто выполняете эту функцию. 

$(document).ready(function(){
    $(".test").on("input", function(){
        calculateTotal();
    });
});

Ваш пример в этой скрипке: https://jsfiddle.net/xL6hgder/2/

0 голосов
/ 24 октября 2019 
 $(document).ready(function () {
        $(".test").on('input', function () {
            var total = parseInt($("#result").text());
            total = parseInt($("#myInput").val()) + parseInt($("#myInput1").val());
            $("#result").text(total);
        });
    });

 <p><input type="text" class="test" placeholder="Type something..." id="myInput" /></p>
    <p><input type="text" class="test" placeholder="Type something..." id="myInput1" /></p>
    <div id="result"></div>
0 голосов
/ 24 октября 2019

Используйте событие изменения вместо входного события. Он будет срабатывать только тогда, когда значение «зафиксировано», вместо каждого нажатия клавиши. Подробнее см. mdn .

...