keyup 事件中的输入 val() 被延迟

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()？这感觉像是一个错误，但我在 Chrome、Safari 和 Firefox 中看到了相同的行为。

Answer 1

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

Answer 2

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

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

希望对您有所帮助。

片段

$(".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");
});

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

keyup 事件中的输入 val() 被延迟

Input val() at keyup event is delayed

javascript

jquery

keyup

片段