Vue+iview键盘事件keyup、keydown、keypress

Logan星

于 2022-05-11 17:51:04 发布

阅读量2.7k

点赞数

分类专栏：笔记文章标签： vue.js javascript ecmascript

本文链接：https://blog.csdn.net/qq_45222558/article/details/124715267

版权

22 篇文章

订阅专栏

本文详细介绍了键盘事件keydown、keypress和keyup的定义及触发顺序。在Vue应用中，当用户按下字符键时，首先触发keydown事件，接着是keypress事件，最后是keyup事件。如果持续按住字符键，keydown和keypress事件会重复触发，直到键被释放。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

详解键盘事件(keydown，keypress，keyup)
1.定义
keydown：按下键盘键
keypress：紧接着keydown事件触发（只有按下字符键时触发）
keyup：释放键盘键
顺序为：keydown -> keypress ->keyup
2.代码示例

   <Input v-model="formValidate.amount" type="text"
           @keydown.native="log" clearable></Input>

这个时候在输入框中输入数字会触发这个事件

log(){
    console.log('测试',999)
},

如图所示：
在这里插入图片描述
3、详解
用户按下键盘上的字符键时
首先会触发keydown事件
然后紧接着触发keypress事件
最后触发keyup事件
如果用户按下了一个字符键不放，就会重复触发keydown和keypress事件，直到用户松开该键为止