vue中键盘事件的触发 | 您所在的位置:网站首页 › vue的键盘事件中哪个是按键弹起时触发 › vue中键盘事件的触发 |
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 实验室设备网 版权所有 |