Question

如果您输入两个字符 - 例如数字'12' - 快速进入输入字段并在每个keyup事件中记录val（），我们得到两个keyup事件，但val()两次都是12（在我的例子中）。

$(".myInput").keyup(function(e){
  console.log("val() = " + $(this).val());
});

输入“12”时的预期输出：

val() = 1
val() = 12

输入'12'时观察到的输出：

val() = 12
val() = 12

Fiddle HERE

更新val()是否存在内置延迟？这感觉就像一个bug，但我在Chrome，Safari和Firefox上看到了相同的行为。

Answer 1

这是因为您在2 keyup事件被解雇之前按1。在释放键之前它不会触发，但您可以在释放第一个字符之前键入下一个字符。由于输入框在12事件触发之前包含keyup，因此val()会在两个事件中向您报告。

Answer 2

使用input事件来跟踪输入字段的变化非常有用，它会阻止您在这种情况下的行为：

$("#testField").on('input', function(e){
   $('.outputContainer').append("val() = " + $(this).val() + "m keycode = "+ e.keyCode +"\n");
});

希望这有帮助。

段

＆＃13;

$(".outputContainer").html("Type a number fast in the field above \n");
$("#testField").on('input', function(e){
  $('.outputContainer').append("val() = " + $(this).val() + "m keycode = "+ e.keyCode +"\n");
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="testField" type="number">

<div class="outputContainer">
test
</div>

＆＃13;

keyup事件中的输入val（）被延迟

2 个答案:

段