Vue中监听键盘事件 - Leayh - CSDN博客

版权声明：本文为博主原创文章，如有错误欢迎指正，如需转载请注明出处，谢谢配合。 https://blog.csdn.net/xiaxiangyun/article/details/80404768

背景

在一些搜索框中，我们往往需要监听键盘的按下(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官方文档：将原生事件绑定到组件。

原网址: 访问
创建于: 2018-10-13 21:04:21
目录: default
标签: 无

未标明原创文章均为采集，版权归作者所有，转载无需和我联系，请注明原出处，南摩阿彌陀佛，知识，不只知道，要得到

请先后发表评论
  • 最新评论
  • 总共0条评论