监听input变化的事件

可以监听input变化的事件

在需要监听input输入值改变的时候,可以通过原声DOM对象的事件oninput/onchange/onkeyup/onkeypress/onkeydown 事件来监听。

这几种事件的触发条件
事件名称触发条件
onchange事件会在域的内容改变时发生
oninput事件在用户输入时触发
onkeyup事件会在键盘按键被松开时发生
onkeypress在按下按键时触发, 不能触发所有按键(例如:ALT, CTRL, SHIFT, ESC)
onkeydown会在用户按下一个键盘按键时发生
这几种事件的区别

onchange事件只在键盘或者鼠标操作改变对象属性,且失去焦点时触发,脚本触发无效,而onkeydown/onkeypress/onkeyup在处理复制、粘贴、长按键 处理上会有问题。
onkeydown、onkeypress、onkeyup在复制文本的时候均无法感知。

oninput不用考虑是否失去焦点,不管js操作还是键盘鼠标手动操作,只要HTML元素属性发生改变即可立即捕获到。

结论

如果要时时的监听input中值的变化,用oninput最合适

在react中,对input onChange跟原生DOM的oninput机制基本一样,只要HTML元素属性发生改变即可立即捕获到.可以参考这篇文档点击进入

转载于:https://www.cnblogs.com/slongs/p/10557664.html

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值