前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >22. Vue keycodes按键修饰符

22. Vue keycodes按键修饰符

作者头像
Devops海洋的渔夫
修改2023-09-21 14:55:01
2K0
修改2023-09-21 14:55:01
举报
文章被收录于专栏:Devops专栏

需求

在业务开发中,例如:用户登录添加用户名和密码之后,按下回车键完成登录,这个操作就需要绑定按键的keyup事件,并且还要使用按键修饰符来指定按下的键盘按钮。

下面来看看另一个需求来逐步认识一下按钮修饰符。

按键修饰符

在监听键盘事件时,我们经常需要检查详细的按键。Vue 允许为 v-on 在监听键盘事件时添加按键修饰符:

代码语言:javascript
复制
<!-- 只有在 `key` 是 `Enter` 时调用 `vm.submit()` -->
<input v-on:keyup.enter="submit">

你可以直接将 KeyboardEvent.key 暴露的任意有效按键名转换为 kebab-case 来作为修饰符。

代码语言:javascript
复制
<input v-on:keyup.page-down="onPageDown">

在上述示例中,处理函数只会在 $event.key 等于 PageDown 时被调用。

下面来完成一下列表操作中的数据添加操作,如下:

这时候只要按下键盘的enter按钮,那么则会执行add方法,执行添加数据,如下:

除了enter这个常用的按键码,还有更多的按键我们需要知道的,如下。

按键码

keyCode 的事件用法已经被废弃了并可能不会被最新的浏览器支持。

使用 keyCode attribute 也是允许的:

代码语言:javascript
复制
<input v-on:keyup.13="submit">

为了在必要的情况下支持旧浏览器,Vue 提供了绝大多数常用的按键码的别名:

  • .enter
  • .tab
  • .delete (捕获“删除”和“退格”键)
  • .esc
  • .space
  • .up
  • .down
  • .left
  • .right

有一些按键 (.esc 以及所有的方向键) 在 IE9 中有不同的 key 值, 如果你想支持 IE9,这些内置的别名应该是首选。

你还可以通过全局 config.keyCodes 对象自定义按键修饰符别名:

代码语言:javascript
复制
// 可以使用 `v-on:keyup.f1`
Vue.config.keyCodes.f1 = 112

自定义按键修饰符别名

对于一些上面112 这样难以记住的按键符号,可以通过自定义别名来进行记录。

keyCodes
  • 类型{ [key: string]: number | Array<number> }
  • 默认值{}
  • 用法: Vue.config.keyCodes = { v: 86, f1: 112, // camelCase 不可用 mediaPlayPause: 179, // 取而代之的是 kebab-case 且用双引号括起来 "media-play-pause": 179, up: 38, 87 } <input type="text" @keyup.media-play-pause="method"> 给 v-on 自定义键位别名。
对f2按钮自定义按钮修饰符
代码语言:javascript
复制
    // 自定义按键修饰符
    Vue.config.keyCodes = {
        f2: 113,
    };

上面设置好了f2按钮的别名之后,下面给监听事件设置修饰符即可,如下:

浏览器显示如下:

更多的按键码说明

在上面我们知道了113f2的按键码,那么还有更多的按键码呢?可以看下面的篇章查询。

js keycode键盘码

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 需求
  • 按键修饰符
    • 按键码
      • 自定义按键修饰符别名
        • keyCodes
        • 对f2按钮自定义按钮修饰符
      • 更多的按键码说明
      领券
      问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档