onkeypress 与 oninput 如何两全其美

Question

所以我正在使用输入并且需要获取键码，所以我尝试使用onkeypress. keypress但是，我还需要更新的值，但在触发事件时实际上并没有该值。

所以然后我尝试使用oninput，但是，虽然输入的更新值在那里，但它没有注册keyCode。

现在我正在使用这两个事件，但想知道是否有一个包罗万象的事件既包含keyCode又包含更新的input.

$("#test").on('keypress', () => {
  console.log("keypress value: ", event.target.value);
});
$("#test").on('input', () => {
  console.log("input value: ", event.target.value);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="test" />

Answer 1

您可以使用keyup事件。这将为您keycode提供updatedValue

$("#test").on('keyup', function(e) {
  console.log(e.keyCode, this.value)
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="test" />

当您键入按键时，会发生以下事件

1. 键按下：这将记录按下的是哪个键。如果您想阻止键入任何键，请在此处阻止它。
2. 按键：这将记录正在按住哪个键。它的值在 keyDown 上设置并在 keyUp 上删除。
3. 按键：这是当您释放按键并且事件链完成时。这是更新值的事件。