100字范文,内容丰富有趣,生活中的好帮手!
100字范文 > 如何实时监听 input 和 textarea输入框值的变化

如何实时监听 input 和 textarea输入框值的变化

时间:2022-04-30 11:48:22

相关推荐

如何实时监听 input 和 textarea输入框值的变化

在实际前端开发中我们经常会遇到要实时监听用户的输入,根据不同的输入值来采取不同的措施。举一个常见的例子:我们在使用Google 搜索框进行搜索时,每多输入一个字,搜索框下方显示的匹配结果会实时变化。这样的效果就是通过实时监听搜索框的输入值变化从而提取不同的匹配结果来实现的。

那么,一般使用最多的输入框就是 input 和 textarea 了。要想实时监听这两种输入框的值变化,就不得不提到键盘事件 key event 了。

键盘相关事件

onkeydownonkeypressonkeyuponinputonchangeonpropertychange

onkeydown/onkeypress/onkeyup

使用这三个事件监听输入框值变化,不能监听到右键的复制、粘贴、剪切的操作。

onkeydown

按下键盘上的任意键(不包括PrScrn键)时触发;如果一直按着键不放,则会一直触发此事件。

onkeypress

按下键盘上的可显示字符键(可以参考此文的键盘按键分类一节)时触发,如果一直按着键不放,则会一直触发此事件。

onkeyup

释放键盘上的任意键(不包括PrScrn键)时触发

1、是否可以捕获组合键?

onkeydown/onkeyup可以捕获组合键,onkeypres

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。