通过keydown,keyup,keypress事件监听输入框内内容的问题

html

<input type="text" name="search" id="search" placeholder="请输入搜索内容">

javascript控制台输出文本框内容

var search = document.getElementById("search");
search.onkeyup = function(){
console.log(search.value)
}
search.onkeypress = function(){
console.log(search.value)
}
search.onkeydown = function(){
console.log(search.value)
}

当输入a时，keyup事件 输出 a，keypress 和 keydown事件输出 空字符；

当输入ab时，onkeyup事件 输出 ab，onkeypress 和 onkeydown事件输出 a；

以此类推。

总结：事件顺序：按下键盘-触发keypress和keydown-字符输入-松开键盘-触发keyup

所以keypress和keydown监听内容无法及时反馈最近一次变化。

延伸，监听内容变化一般用oninput和onchange。参考链接