在一些搜索框中,我们需要监听键盘的按下(onkeydown)或抬起(onkeyup)事件以进行一些操作。
1.Vue中常用的按键别名:
回车 => enter
删除 => delete (捕获“删除”和“退格”键)
退出 => esc
空格 => space
换行 => tab (特殊,必须配合keydown去使用)
上 => up
下 => down
左 => left
右 => right
- 示例
准备方法
showInfo(e){
// key是按键名字,keyCode是按键的编码
console.log(e.key,e.keyCode)
// 输入框的值
// console.log(e.target.value)
}
<input type="text" placeholder="按下回车提示输入" @keydown.enter = "showInfo">
<input type="text" placeholder="拾起左箭头提示输入" @keyup.left = "showInfo">
删除 => delete (捕获“删除”和“退格”键)
<input type="text" placeholder="按下删除提示输入" @keyup.delete = "showInfo">
tab (特殊,必须配合keydown去使用)
<input type="text" placeholder="按下tab提示输入" @keydown.tab = "showInfo">
2.Vue未提供别名的按键
查看未提供别名的一些按键
<input type="text" placeholder="按下提示输入" @keydown = "showInfo">
Vue未提供别名的按键,可以使用按键原始的key值去绑定,但注意要转为kebab-case(短横线命名)
<input type="text" placeholder="按下CapsLock提示输入" @keydown.caps-lock = "showInfo">
3.系统修饰键(用法特殊):ctrl、alt、shift、meta
meta键也叫win键,就是能打开windows菜单的键
(1).配合keyup使用:按下修饰键的同时,再按下其他键,随后释放其他键,事件才被触发。
- 示例
<input type="text" placeholder="按下ctrl提示输入" @keyup.ctrl = "showInfo">
可以看出,事件不触发
(2).配合keydown使用:正常触发事件。
- 示例
<input type="text" placeholder="按下ctrl提示输入" @keydown.ctrl = "showInfo">
4.使用keyCode去指定具体的按键(不推荐)
可以使用keyCode去指定具体的按键(不推荐),因为不同电脑的按键code可能不同
<input type="text" placeholder="按下tab提示输入" @keydown.9 = "showInfo">
5.Vue.config.keyCodes.自定义键名 = 键码,可以去定制按键别名
<input type="text" placeholder="按下回车提示输入" @keydown.huiche="showInfo">
Vue.config.keyCodes.huiche = 13 // 定义了一个别名按键
showInfo(e){
console.log(e.key,e.keyCode)
}