Vue中的键盘事件

538 阅读1分钟

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='',进行监听