键盘事件
- 在
js
中我们通常通过绑定一个事件,去获取按键的编码,再通过 event
中的 keyCode
属性去获得编码
- 如果我们需要实现固定的键才能触发事件时就需要不断的判断,其实很麻烦
let button = document.querySelector('button')
button.onkeyup = function (e) {
console.log(e.key)
if (e.keyCode == 13) {
console.log('我是回车键')
}
}
vue
中给一些常用的按键提供了别名,我们只要在事件后加上响应的别名即可
vue
中常见别名有:up/向上箭头
、down/向下箭头
、left/左箭头
、right/右箭头
、space/空格
、tab/换行
、esc/退出
、enter/回车
、delete/删除
<input v-on:keyup.enter="send" type="text">
- 对于
Vue
中未提供别名的键,可以使用原始的 key
值去绑定,所谓 key
值就是 event.key
所获得的值
- 如果
key
值是单个字母的话直接使用即可,如果是由多个单词组成的驼峰命名,就需要将其拆开,用 -
连接
<input v-on:keyup.Q="send" type="text">
<input v-on:keyup.caps-lock="send" type="text">
- 对于系统修饰符
ctrl
、alt
、shift
这些比较复杂的键使用而言,分两种情况
- 因为这些键可以在按住的同时,去按其他键,形成组合快捷键
- 当触发事件为
keydown
时,我们可以直接按下修饰符即可触发
- 当触发事件为
keyup
时,按下修饰键的同时要按下其他键,再释放其他键,事件才能被触发。
<input v-on:keydown.Alt="send" type="text">
<input v-on:keyup.Alt.y="send" type="text">
- 当然我们也可以自定义按键别名
- 通过
Vue.config.keyCodes.自定义键名=键码
的方式去进行定义
<input v-on:keydown.autofelix="send" type="text">
Vue.config.keyCodes.autofelix=13