jQuery 如何检测文本输入框的变化

Question

我有两个文本输入文本框，我想对用户未输入的内容进行总计。下面是我的代码：

$(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，我不明白为什么会这样。我哪里出错了，指导一下？

Answer 1

在您的代码中，当您输入第一位数字时，由于您的代码 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>

Answer 2

使用更改事件而不是输入事件。它只会在值为 "commited" 时触发，而不是每次击键时触发。有关详细信息，请参阅 mdn。

Answer 3

它没有显示您想要的结果的原因是计算错误。现在，每当一个输入字段发生变化时，您就将该数字添加到总数中。因此，如果您键入 123，它需要 0 + 1，然后是 1 + 12，然后是 13 + 123，所以您将得到 136 作为结果。

我为你的问题写了一个可能的解决方案。代码在下面的fiddle

您可以添加一个函数来计算所有输入字段的总数（可能超过 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();
    });
});

你的例子在这个fiddle中：https://jsfiddle.net/xL6hgder/2/

Answer 4

您只需使用要更改的输入值更新总计。

要获得两个输入值的总和，您必须取两个值并将其与总和相加。

试试下面的代码-

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

Answer 5

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

jQuery 如何检测文本输入框的变化

How to Detect Change in a Text Input Box in jQuery

javascript

jquery

input

html-input