onkeypress vs 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. Key Up：这是您释放密钥和事件链完成时的情况。这是更新值的事件。

Answer 2

另一个重要的区别是，当你尝试大写或小写时，看看这个不同。

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

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