通过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。参考链接

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值