原文地址


背景

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


返回目录

vue如何监听键盘事件中的按键?的更多相关文章

  1. vue的监听键盘事件的快捷方法

    在我们的项目经常需要监听一些键盘事件来触发程序的执行,而Vue中允许在监听的时候添加关键修饰符: <input v-on:keyup.13="submit"> 对于一些 ...

  2. Vue 框架-03-键盘事件、健值修饰符、双向数据绑定

    Vue 框架-03-键盘时间及健值修饰符 一.键盘事件,当按键盘时,在控制台输出提示 html 源码: <!DOCTYPE html> <html> <head> ...

  3. jQuery监听键盘事件及相关操作使用教程

    一.首先需要知道的是: 1.keydown() keydown事件会在键盘按下时触发. 2.keyup() keyup事件会在按键释放时触发,也就是你按下键盘起来后的事件 3.keypress() k ...

  4. jQuery监听键盘事件及相关操作使用

    一.首先需要知道的是: 1.keydown() keydown事件会在键盘按下时触发. 2.keyup() keyup事件会在按键释放时触发,也就是你按下键盘起来后的事件 3.keypress() k ...

  5. js监听键盘事件

    用JS监听键盘按下事件(keydown event)   1.监听全局键盘按下事件,例如监听全局回车事件 1 $(document).keydown(function(event){ 2 if(eve ...

  6. 一、python小功能记录——监听键盘事件

    1.监听键盘按键 from pynput.keyboard import Listener def press(key): print(key.char) with Listener(on_press ...

  7. python 监听键盘事件pyHook

    #coding=utf- import pyHook import pythoncom # 监听到鼠标事件调用 def onMouseEvent(event): if(event.MessageNam ...

  8. jq 监听键盘事件

    其实这个也是挺简单的一些东西.也就是几个参数: 一.首先需要知道的是:         1.keydown()                 keydown事件会在键盘按下时触发. 2.keyup( ...

  9. Vue中全局监听键盘事件

    全局监听enter键,是把监听事件绑定到document上 常用的keyCode键盘编码在这里:https://www.cnblogs.com/wbyixx/p/12029508.html creat ...

随机推荐

  1. Spring实战(第4版)

    第1部分 Spring的核心 Spring的两个核心:依赖注入(dependency injection,DI)和面向切面编程(aspec-oriented programming,AOP) POJO ...

  2. c#使用 StackExchange.Redis 封装 RedisHelper

    公司一直在用.net自带的缓存,大家都知道.net自带缓存的缺点,就不多说了,不知道的可以查一查,领导最近在说分布式缓存,我们选的是redis,领导让我不忙的时候封装一下,搜索了两天,选了选第三方的插 ...

  3. fsLayui缓存使用

    概述 缓存主要使用在编辑或查看页面查询数据的方式,通过后端servlet接口获取数据还是通过前端缓存获取.缓存可以使用在实时性要求不高的上面.减少后端servlet请求. 使用步骤 配置支持缓存 需要 ...

  4. 虚拟机里的nginx启动不了的问题

    问题:  之前使用虚拟机nginx一直都是正常的, 就在昨天重新配置了一下nginx(其实只注释了反向代理,别的都没动), 重启nginx, 却报错pid为空. 无法启动nginx.   而且重启之前 ...

  5. 洛谷【P2257】 YY的GCD

    出处:http://www.cnblogs.com/peng-ym/p/8652288.html   (  直接去出处那看就好了 ) 题目描述 神犇YY虐完数论后给傻×kAc出了一题 给定N, M,求 ...

  6. 路由器配置——基于区域的OSPF简单认证

    一.实验目的:掌握区域的OSPF简单认证 二.拓扑图: 三.具体步骤配置: (1)R1路由器配置 Router>enable Router#configure terminal Enter co ...

  7. 【csp模拟赛2】黑莲花--数据结构+数论

    没有什么能够阻挡,你对被阿的向往.天天 AK 的生涯,你的心了无牵挂. 虐过大佬的比赛,也曾装弱装逼.当你低头的瞬间,才发现旁边的人. 把你的四肢抬起来,使劲地往门上撞.盛开着永不凋零,黑莲花. —— ...

  8. 【luogu2668斗地主】模拟

    题目描述: 输入格式: 输出格式: 输入样例: 1: 1 8 7 4 8 4 9 1 10 4 11 1 5 1 1 4 1 1 2: 1 17 12 3 4 3 2 3 5 4 10 2 3 3 1 ...

  9. JetBrains IDE 基本快捷键

    转载自:https://nextfe.com/jetbrains-ide-shortcuts/ 一个好的手艺人很熟悉他的工具.软件开发者也不例外.所以,在编程的过程中,值得了解一些键盘快捷键,以免因为 ...

  10. 第67节:Java中的JDBC运用

    第67节:Java中的JDBC运用 https://www.jianshu.com/p/628a9ba1b205