jQuery通过按键获取sum总是落后一步

jQuery getting sum with keypress always one step behind

本文关键字：一步 sum 获取 jQuery      更新时间：2023-09-26

我正在尝试创建一个计算器，我想在其中对每次按键进行加法/求和，如下所示：

$('#padd').keypress(function() {
    var ypoints = "200";        
    var points = parseInt( $(this).val() );
    console.log( "Points: " + (points + parseInt(ypoints)) );
});

我的问题是，"积分"似乎总是落后一步。假设我的"ypoints"是200，我输入第一个1，console.log显示"NaN"？如果我输入"10"，console.log会显示"201"，而实际上应该显示"210"？！？如果我在添加字段中添加一个"100"，它会显示"210"，但应该显示"300"。总是落后一个按键？！？

我在这里遗漏了什么，或者这不是正确的方法吗？

如有任何帮助，我们将不胜感激：-）

尝试使用keyup函数（尽管您可能根本不想侦听key*事件，请参阅下文）：

$('#padd').keyup(function(){
  var ypoints = 200;        
  var points = parseInt($(this).val());
  console.log("Points: "+(points+ypoints));
});

应该监听显式input事件，而不是keyup：

$('#padd').on("input", function(){
  var ypoints = 200;        
  var points = parseInt($(this).val());
  console.log("Points: "+(points+ypoints));
});

使用keyup监听input事件胜过使用number类型的input时的示例。在现代浏览器中，这会在输入字段中添加一个步进器，您可以使用鼠标将输入值递增或递减1。这不会触发keyup事件（没有按键），但会更改值。

实际上，这是一个特定事件何时触发以及input值当时的状态的问题。在quicksmode.org上有一个解释：

按键

当用户释放密钥时激发，在执行该密钥的默认操作之后。

以及MDN:上有关input事件的更多信息

当或元素的值发生更改时，DOM输入事件被同步激发。

试试这个，它是一个工作代码：Fiddle

$('#padd').keyup(function(){
        var ypoints = "200";        
        var points = parseInt($(this).val());
        alert("Points: "+(points+parseInt(ypoints)));
 });

您也可以用这种方式编码。。。

    function GetTextboxAmount(obj) {
        var retVal = 0;
        try {
            if (obj.val() == "") {
                retVal = 0;
            } else if (obj.val() == '') {
                retVal = 0;
            } else if (isNaN(parseFloat(obj.val()))) {
                retVal = 0;
            } else {
                retVal = Math.round(parseFloat(obj.val()));
            }
        } catch (e) { retVal = 0; }
        obj.val(retVal);
        return retVal;
    }
$('#padd').keyup(function(){
    var ypoints = "200";        
    var points = GetTextboxAmount($(this));
    console.log("Points: "+(points+parseInt(ypoints)));
}); 

  Problem in ParseInt function.
  try this Code:
    $('#padd').keypress(function(){
    var ypoints = "200";        
    var points = parseInt($(this).val());
    console.log("Points: "+parseInt(ypoints+points));
});
相关文章：