键控事件中的输入 val(） 延迟

Input val() at keyup event is delayed

本文关键字：val 延迟 输入 事件      更新时间：2023-09-26

如果您快速在输入字段中键入两个字符（例如数字"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

在这里摆弄。

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

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

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

相关文章：