html5响应键盘事件,vue监听键盘事件的相关总结

这篇文章主要介绍了vue监听键盘事件的相关总结，帮助大家更好的理解和使用vue框架，感兴趣的朋友可以了解下

按键修饰符

在监听键盘事件时，我们经常需要检查详细的按键。Vue 允许为 v-on 在监听键盘事件时添加按键修饰符：

你可以直接将 KeyboardEvent.key 暴露的任意有效按键名转换为 kebab-case 来作为修饰符。

为了在必要的情况下支持旧浏览器，Vue 提供了绝大多数常用的按键码的别名：

– enter

– tab

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

– esc

– space

– up

– down

– left

– right

你还可以通过全局 config.keyCodes 对象自定义按键修饰符别名：

// 可以使用 `v-on:keyup.f1`

Vue.config.keyCodes.f1 = 112

系统修饰键

可以用如下修饰符来实现仅在按下相应按键时才触发鼠标或键盘事件的监听器。

– .ctrl

– .alt

– .shift

– .meta

Do something

与按键别名不同的是，修饰键和 keyup 事件一起用时，事件引发时必须按下正常的按键。换一种说法：如果要引发 keyup.ctrl，必须按下 ctrl 时释放其他的按键；单单释放 ctrl 不会引发事件。

对于elementUI的input，我们需要在后面加上.native, 因为elementUI对input进行了封装，原