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

Posted 2023-03-05

【中文标题】如何在 jQuery 中检测文本输入框中的变化

【英文标题】：How to Detect Change in a Text Input Box in jQuery

【发布时间】：2020-02-20 15:19:21

【问题描述】：

我有两个文本输入文本框，我想做用户没有输入的所有内容。以下是我的代码：

$(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，我不明白为什么会发生这种情况。我在哪里犯了错误，请指导我？

【问题讨论】：

这是因为您要为输入的每个 字符 添加值。例如。如果你输入10，它会为第一个字符添加0 + 1，然后是1 + 10。

那么正确的解决方案是什么？ @RoryMcCrossan

试试change 事件

用change 事件试试我的答案。 @MohammedSabir

【参考方案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>

【讨论】：

请解释一下为什么你认为这是解决方案而不仅仅是一些代码，以便OP下次可以自己理解和解决:)

您不能只是硬编码输入选择方法，假设如果有两个以上的输入字段，那么您的代码条件将一次又一次地修改。也试试我的答案，或者你可以更新你的答案。 @Yahiya

你是对的@ShubhamBaranwal。但是在他的问题上，他说他有两个文本字段，没有提到我为什么要添加这样的答案的动态字段数量。另外，也为您的回答竖起大拇指... ;)

没错，但您的答案不仅可以帮助该用户，而且如果您的答案针对其他人进行了优化和可扩展，那么您的答案也可以帮助其他人。 @Yahiya

@ShubhamBaranwal 承认

【参考方案2】：

使用更改事件而不是输入事件。它只会在值“提交”时触发，而不是每次击键。详情请见mdn。

【讨论】：

您应该将此写入评论部分，而不是作为答案。

【参考方案3】：

它没有显示你想要的结果的原因是因为计算错误。现在，每当一个输入字段更改时，您就将这个数字添加到总数中。因此，如果您输入 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/

【参考方案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>

【参考方案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>