键盘事件
- 在
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/删除
// 只有按下回车键时才会执行 send 方法
<input v-on:keyup.enter="send" type="text">
- 对于
Vue
中未提供别名的键,可以使用原始的key
值去绑定,所谓key
值就是event.key
所获得的值 - 如果
key
值是单个字母的话直接使用即可,如果是由多个单词组成的驼峰命名,就需要将其拆开,用-
连接
// 只有按下q键时才会执行send方法
<input v-on:keyup.Q="send" type="text">
// 只有按下capslock键时才会执行send方法
<input v-on:keyup.caps-lock="send" type="text">
- 对于系统修饰符
ctrl
、alt
、shift
这些比较复杂的键使用而言,分两种情况 - 因为这些键可以在按住的同时,去按其他键,形成组合快捷键
- 当触发事件为
keydown
时,我们可以直接按下修饰符即可触发 - 当触发事件为
keyup
时,按下修饰键的同时要按下其他键,再释放其他键,事件才能被触发。
// keydown事件时按下alt键时就会执行send方法
<input v-on:keydown.Alt="send" type="text">
// keyup事件时需要同时按下组合键才会执行send方法
<input v-on:keyup.Alt.y="send" type="text">
- 当然我们也可以自定义按键别名
- 通过
Vue.config.keyCodes.自定义键名=键码
的方式去进行定义
// 只有按下回车键时才会执行send方法
<input v-on:keydown.autofelix="send" type="text">
// 13是回车键的键码,将他的别名定义为autofelix
Vue.config.keyCodes.autofelix=13