javascript - jQuery 通过按键获取总和总是落后一步

Question

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

$('#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”。总是落后一个按键？!？

我在这里缺少什么或者这不是正确的方法吗？

感谢任何帮助，并提前致谢:-)

Answer 1

Try using the keyup function instead (尽管您可能根本不想监听 key* 事件，请参见下文):

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

您应该 listen for the explicit input event 而不是 keyup :

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

使用 keyup 监听 input 事件的一个例子是 using an input of type number 。在 (not so) modern browser ，这会向输入字段添加一个步进器，您可以使用鼠标将输入值递增或递减 1。这不会触发 keyup 事件(没有按键被按下)，但仍然会更改值。

<小时/>

这实际上是何时触发某些事件以及当时输入值的状态的问题。有一个explanation on quirksmode.org :

keyup

Fires when the user releases a key, after the default action of that key has been performed.

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

The DOM input event is fired synchronously when the value of an or element is changed.