onkeypress vs oninput如何获得最好的两个世界

Question

所以我使用一个输入并需要获取密钥，所以我尝试使用onkeypress。但是，我还需要更新的值，当keypress事件被触发时它实际上没有。

然后，我尝试使用oninput，但是，当输入的更新值在那里时，它不会注册keyCode。

现在我正在使用这两个事件，但想知道是否有一个包含keyCode和更新的input的catch-all事件。

$("#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"/>