vue中键盘事件的触发 您所在的位置:网站首页 vue的键盘事件中哪个是按键弹起时触发 vue中键盘事件的触发

vue中键盘事件的触发

2024-02-25 15:00| 来源: 网络整理| 查看: 265

1:我们已经知道,vue中事件的基本使用就是 加上@click ,举个简单例子给按钮添加点击事件: 点我提示信息1(不传参) 点我提示信息2(传参) 2:那么如何给键盘添加一个事件呢?

还是这样,再举个例子,我们给输入框绑定一个简单的回车事件。

那么keydown就是说键盘敲下时就触发,那如果想键盘敲下,然后手离开时再触发时我们就会用到keyup。

3:常见的键盘事件。

                            回车 => enter

                            删除 => delete (捕获“删除”和“退格”键)

                            退出 => esc

                            空格 => space

                            换行 => tab (特殊,必须配合keydown去使用)

                            上 => up

                            下 => down

                            左 => left

                            右 => right

前面3点提到的已经满足普遍需求。

4:如何使用键盘中其他的按键绑定事件呢?

还是一样的,这里我们用一个字母M的按键举例子,可能有人会认为那应该就是键盘上的字母来命名吧,这样写:keydown.M其实这是不对的。因为Vue未提供别名的按键,但是我们可以使用按键原始的key值去绑定。键盘上每个按键都有他的编码。

那么应该怎么做?

拿到按键的key 首先弄个输入框绑定键盘事件。

然后我们在方法中,这样做 控制台就可以拿到这个值,之后再把这个值加到你的 keydown或者

keyup上。

methods: { showInfo(e){ console.log(e.key,e.keyCode) } }

值得注意到的是:大小写的需要做转换:即多个单词的需要转换成小写并且加-

如:大小写:kebab-case(短横线命名)

5:

系统修饰键(用法特殊):ctrl、alt、shift、meta

                            (1).配合keyup使用:按下修饰键的同时,再按下其他键,随后释放其他键,事件才被触发。

                            (2).配合keydown使用:正常触发事件。

6:Vue.config.keyCodes.自定义键名 = 键码,可以去定制按键别名



【本文地址】

公司简介

联系我们

今日新闻

    推荐新闻

    专题文章
      CopyRight 2018-2019 实验室设备网 版权所有