onkeypress vs oninput如何充分利用两个世界

时间:2017-04-19 06:49:55

标签: javascript jquery events event-handling

所以我正在使用输入并需要获取密钥代码,所以我尝试使用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" />

2 个答案:

答案 0 :(得分:2)

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

$("#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:这是您释放密钥和事件链完成时。这是更新值的事件。

答案 1 :(得分:0)

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

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