vue如何监听键盘事件中的按键?
背景
在一些搜索框中,我们往往需要监听键盘的按下(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
,直接使用别名就能监听按键的事件。
<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 |
注意
但是,如果是在自己封装的组件或者是使用一些第三方的UI库时,会发现并不起效果,这时就需要用到.native
修饰符了,如:
<el-input
v-model="inputName"
placeholder="搜索你的文件"
@keyup.enter.native="searchFile(params)"
>
</el-input>
如果遇到.native
修饰符也无效的情况,可能就需要用到$listeners
了,具体用法请参考Vue官方文档:将原生事件绑定到组件。
返回目录
vue如何监听键盘事件中的按键?的更多相关文章
- vue的监听键盘事件的快捷方法
在我们的项目经常需要监听一些键盘事件来触发程序的执行,而Vue中允许在监听的时候添加关键修饰符: <input v-on:keyup.13="submit"> 对于一些 ...
- Vue 框架-03-键盘事件、健值修饰符、双向数据绑定
Vue 框架-03-键盘时间及健值修饰符 一.键盘事件,当按键盘时,在控制台输出提示 html 源码: <!DOCTYPE html> <html> <head> ...
- jQuery监听键盘事件及相关操作使用教程
一.首先需要知道的是: 1.keydown() keydown事件会在键盘按下时触发. 2.keyup() keyup事件会在按键释放时触发,也就是你按下键盘起来后的事件 3.keypress() k ...
- jQuery监听键盘事件及相关操作使用
一.首先需要知道的是: 1.keydown() keydown事件会在键盘按下时触发. 2.keyup() keyup事件会在按键释放时触发,也就是你按下键盘起来后的事件 3.keypress() k ...
- js监听键盘事件
用JS监听键盘按下事件(keydown event) 1.监听全局键盘按下事件,例如监听全局回车事件 1 $(document).keydown(function(event){ 2 if(eve ...
- 一、python小功能记录——监听键盘事件
1.监听键盘按键 from pynput.keyboard import Listener def press(key): print(key.char) with Listener(on_press ...
- python 监听键盘事件pyHook
#coding=utf- import pyHook import pythoncom # 监听到鼠标事件调用 def onMouseEvent(event): if(event.MessageNam ...
- jq 监听键盘事件
其实这个也是挺简单的一些东西.也就是几个参数: 一.首先需要知道的是: 1.keydown() keydown事件会在键盘按下时触发. 2.keyup( ...
- Vue中全局监听键盘事件
全局监听enter键,是把监听事件绑定到document上 常用的keyCode键盘编码在这里:https://www.cnblogs.com/wbyixx/p/12029508.html creat ...
随机推荐
- Spring实战(第4版)
第1部分 Spring的核心 Spring的两个核心:依赖注入(dependency injection,DI)和面向切面编程(aspec-oriented programming,AOP) POJO ...
- c#使用 StackExchange.Redis 封装 RedisHelper
公司一直在用.net自带的缓存,大家都知道.net自带缓存的缺点,就不多说了,不知道的可以查一查,领导最近在说分布式缓存,我们选的是redis,领导让我不忙的时候封装一下,搜索了两天,选了选第三方的插 ...
- fsLayui缓存使用
概述 缓存主要使用在编辑或查看页面查询数据的方式,通过后端servlet接口获取数据还是通过前端缓存获取.缓存可以使用在实时性要求不高的上面.减少后端servlet请求. 使用步骤 配置支持缓存 需要 ...
- 虚拟机里的nginx启动不了的问题
问题: 之前使用虚拟机nginx一直都是正常的, 就在昨天重新配置了一下nginx(其实只注释了反向代理,别的都没动), 重启nginx, 却报错pid为空. 无法启动nginx. 而且重启之前 ...
- 洛谷【P2257】 YY的GCD
出处:http://www.cnblogs.com/peng-ym/p/8652288.html ( 直接去出处那看就好了 ) 题目描述 神犇YY虐完数论后给傻×kAc出了一题 给定N, M,求 ...
- 路由器配置——基于区域的OSPF简单认证
一.实验目的:掌握区域的OSPF简单认证 二.拓扑图: 三.具体步骤配置: (1)R1路由器配置 Router>enable Router#configure terminal Enter co ...
- 【csp模拟赛2】黑莲花--数据结构+数论
没有什么能够阻挡,你对被阿的向往.天天 AK 的生涯,你的心了无牵挂. 虐过大佬的比赛,也曾装弱装逼.当你低头的瞬间,才发现旁边的人. 把你的四肢抬起来,使劲地往门上撞.盛开着永不凋零,黑莲花. —— ...
- 【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 ...
- JetBrains IDE 基本快捷键
转载自:https://nextfe.com/jetbrains-ide-shortcuts/ 一个好的手艺人很熟悉他的工具.软件开发者也不例外.所以,在编程的过程中,值得了解一些键盘快捷键,以免因为 ...
- 第67节:Java中的JDBC运用
第67节:Java中的JDBC运用 https://www.jianshu.com/p/628a9ba1b205