vue如何监听键盘事件中的按键?

时间:2022-12-07 13:54:31

原文地址


背景

在一些搜索框中,我们往往需要监听键盘的按下(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(下箭头)

参考:JavaScript 获取键盘事件(键盘某个按键被按下)

方案

在Vue中,已经为常用的按键设置了别名,这样我们就无需再去匹配keyCode,直接使用别名就能监听按键的事件。

<input @keyup.enter="function">
别名 实际键值
.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

参考:vue 监听键盘回车事件 @keyup.enter || @keyup.enter.native

注意

但是,如果是在自己封装的组件或者是使用一些第三方的UI库时,会发现并不起效果,这时就需要用到.native修饰符了,如:

<el-input
  v-model="inputName"
  placeholder="搜索你的文件"
  @keyup.enter.native="searchFile(params)"
  >
</el-input>

如果遇到.native修饰符也无效的情况,可能就需要用到$listeners了,具体用法请参考Vue官方文档:将原生事件绑定到组件


返回目录