Onkeypress vs on Intput如何获得两全其美

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. 钥匙出版社：这将注册持有哪个键。它的值设置在键盘上，并在键盘上删除。
3. 键up：这是您发布密钥和事件链的时候。这是更新值的事件。

Answer 2

另一个重要区别是，当您尝试上下案例时，请查看此不同。

$("#testKeyPress").on('keypress', function () {
  $(this).val($(this).val().toUpperCase());
});
$("#testInput").on('input', function () {
  $(this).val($(this).val().toUpperCase());
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
KEYPRESS <input id="testKeyPress"/> <br />
INPUT <input id="testInput" />