1.按键监听事件
1.1 keyup 按下按键并抬起触发
1.2 keydown 按下按键即触发
2.vue中的按键监听方式
2.1提供别名的按键
回车=>enter
删除=>delete(捕获删除和退格事件)
退出=>esc
空格=>space
换行=>tab(特殊,必须配合keydown去使用)
上=>up
下=>down
左=>left
右=>right
<input type="text" placeholder="请输入内容" @keyup.enter="showInfo">
2.2 Vue中为提供别名的按键,可以使用按键原始的key值去绑定,但是要注意需要转换为kebab-case(短横线命名),按键的key可以用以下代码获取:
<input type="text" placeholder="请输入内容" @keyup="showKey">
showKey (e) {
console.log(e.key);
}
// 比如大小写切换 输出的key为CapsLock
大小写切换键盘的key为CapsLock,监听如下:
<input type="text" placeholder="请输入内容" @keyup.caps-lock="showInfo">
2.3 系统修饰键(用法特殊):ctrl, alt, shift, meta
2.3.1 配合keyup使用:按下休时间的同时,再按下其他键,随后释放其他键,时间才能触发
2.3.2 配合keydown使用,正常触发事件
2.4 也可以使用keycode去指定具体的按键(不推荐)
2.5 Vue.config.keycodes.自定义键盘名 = 键码,可以去定制按键别名
2.6 有些按键不可以绑定事件,例如有些电脑的声音,亮度控制等
小技巧:
如果要监听ctrl+c,可以用连写;@keydown.ctrl.c='',进行监听