背景
在一些搜索框中,我们往往需要监听键盘的按下(onkeydown
)或抬起(onkeyup
)事件以进行一些操作。在原生js或者jQuery中,我们需要判断e.keyCode
的值来获取用户所按的键。这样就存在一个问题:我们必须知道某个按键的keyCode
值才能完成匹配,使用起来十分不便。
keyCode | 实际键值 |
---|---|
48到57 | 0到9 |
65到90 | a到z(A到Z) |
112到135 | F1到F24 |
8 | BackSpace(退格) |
9 | Tab |
13 | Enter(回车) |
20 | Caps_Lock(大写锁定) |
32 | Space(空格键) |
37 | Left(左箭头) |
38 | Up(上箭头) |
39 | Right(右箭头) |
40 | Down(下箭头) |
参考:
方案
在Vue中,已经为常用的按键设置了别名,这样我们就无需再去匹配keyCode
,直接使用别名就能监听按键的事件。
别名 | 实际键值 |
---|---|
.delete | delete(删除)/BackSpace(退格) |
.tab | Tab |
.enter | Enter(回车) |
.esc | Esc(退出) |
.space | Space(空格键) |
.left | Left(左箭头) |
.up | Up(上箭头) |
.right | Right(右箭头) |
.down | Down(下箭头) |
.ctrl | Ctrl |
.alt | Alt |
.shift | Shift |
.meta | (window系统下是window键,mac下是command键) |
另外,Vue中还支持组合写法:
组合写法 | 按键组合 |
---|---|
@keyup.alt.67=”function” | Alt + C |
@click.ctrl=”function” | Ctrl + Click |
参考:
注意
但是,如果是在自己封装的组件或者是使用一些第三方的UI库时,会发现并不起效果,这时就需要用到.native
修饰符了,如:
如果遇到.native
修饰符也无效的情况,可能就需要用到$listeners
了,具体用法请参考Vue官方文档:。