vueJS 015 监听键盘事件 修饰键

最新推荐文章于 2023-10-06 17:29:30 发布
最新推荐文章于 2023-10-06 17:29:30 发布
阅读量199 收藏
点赞数
分类专栏： 前端 vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/helloWorldAndYou/article/details/104908429
版权
本文介绍了VueJS中监听键盘事件的方法，包括监听Enter事件、使用键盘按键别名、自定义按键别名、系统修饰键的区别以及exact修饰符的运用。详细讲解了如何通过v-on指令结合keyup事件与各种修饰键实现精确的键盘操作控制。
摘要由CSDN通过智能技术生成

文章目录

参考文档

vue 监听键盘事件API
MDN KeyboardEvent.key 键盘按键别名大全

监听Enter事件

vue 案例：

<!-- 只有在 `key` 是 `Enter` 时调用 `vm.submit()` -->
<input v-on:keyup.enter="submit">

KeyboardEvent.key 键盘按键别名 中的别名 都可以直接这样使用：
v-on:keyup.键盘按键别名

vue提供的按键别名具有兼容性

自定义按键别名

vue 自定义API
通过全局 config.keyCodes 对象自定义按键修饰符别名

// 可以使用 `v-on:keyup.f1`
Vue.config.keyCodes.f1 = 112
系统修饰键

请注意修饰键与常规按键不同，在和 keyup 事件一起用时，事件触发时修饰键必须处于按下状态。即，只有在按住 ctrl 的情况下释放其它按键，才能触发 keyup.ctrl。而单单释放 ctrl 也不会触发事件。如果你想要这样的行为，请为 ctrl 换用 keyCode：keyup.17。

exact 修饰符
<!doctype html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content
最低0.47元/天 解锁文章
helloWorldAndYou
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Vue中监听键盘事件(该文档记录enter)
qq_29954811的博客
02-26 551
按键盘Enter回车，实现用户登录 vue代码（html+js） 下面展示 引用element组件el-input实现用户信息输入并绑定回车事件。 // 关键在于 @keyup.enter.native="searchFile" // An highlighted block &lt;el-form class="m-login" :model="loginForm" ref="loginFor...
vue监听键盘事件中的按键
tian_37的博客
12-07 2219
在Vue中，已经为常用的按键设置了别名，这样我们就无需再去匹配keyCode，直接使用别名就能监听按键的事件。 <input @keyup.enter="function"> 别名 实际键值 .delete delete（删除）/BackSpace（退格） .tab Tab .enter Enter（回车） .esc Esc（退出） .space Space（空格键） .left Left（左箭头） .up Up（上箭头） .right Right（
vue的监听键盘事件的快捷方法
weixin_33997389的博客
07-11 1002
在我们的项目经常需要监听一些键盘事件来触发程序的执行，而Vue中允许在监听的时候添加关键修饰符： <input v-on:keyup.13="submit"> 对于一些常用键，还提供了按键别名： <input @keyup.enter="submit"> <!-- 缩写形式 --> 全部的按键别名： ...
vue键盘事件监听
嘿嘿
07-06 1万+
1、在当前页截获键盘事件，所有按钮均被控制 created () { this.keyDown(); }, beforeDestroy () { this.keyDownReview() }, methods: { //按键恢复 keyDownReview () { document.onkeydown = function (event) { var e = event || window.event;
Vue中监听/禁用键盘事件
黑夜无风的博客
11-03 6616
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，直接使用别名就能监听按键的...
vue全局监听Esc，enter按键事件
ingenuou_的博客
10-14 3990
vue全局监听Esc，enter按键事件
绑定事件监听 v-on指令与其参数传递和修饰符
qiutian24的博客
10-04 477
v-on 1.基础 官方文档链接 https://cn.vuejs.org/v2/api/#v-on 作用：绑定事件监听。 事件类型由参数指定。表达式可以是一个方法的名字或一个内联语句，如果没有修饰符也可以省略。 预期：Function | Inline Statement | Object 语法： <div id="app"> <!--eventA()是自己定义的方法--> <button v-on:click="eventA()">A1
vuejs-cheatsheet
11-01
Vue 也支持各种键盘事件修饰符，以便更精确地处理键盘事件： - **ctrl**: 如果同时按下 `Ctrl` 键，则触发。 - **alt**: 如果同时按下 `Alt` 键，则触发。 - **shift**: 如果同时按下 `Shift` 键，则触发。 - **...
Vuejs（一）：Vuejs模板语法
11-10 878
Vuejs（一）：Vuejs基础语法一：vuejs介绍 一：vuejs介绍 Vue (读音 /vjuː/，类似于 view) Vue是一个渐进式的框架，什么是渐进式的呢？ 渐进式意味着你可以将Vue作为你应用的一部分嵌入其中，带来更丰富的交互体验。 或者如果你希望将更多的业务逻辑使用Vue实现，那么Vue的核心库以及其生态系统。 比如Core+Vue-router+Vuex，也可以满足你各种各样...
Vue页面监听键盘按键的多种方法
最新发布
一步一个脚印，踏实努力，向着目标前进
10-06 1万+
在Vue页面中，可以使用多种方法来监听键盘按键。@keydown@keyup
【Vue教程三】点击事件、表单输入事件、键盘事件
qing_小诺的博客
07-09 5925
一、点击事件： 1、可以用 v-on 指令监听 DOM 事件，并在触发时运行一些 JavaScript 代码。 <body> <div id="app"> <!-- `greet` 是在下面定义的方法名 --> <p>{{name}}</p> <button v-on:c.........
vue 使用 js 监听监听键盘按钮事件并阻止按键默认事件
shibaweijin的博客
11-30 1024
【代码】vue 使用 js 监听监听键盘按钮事件并阻止按键默认事件。
Vue中监听键盘事件
热门推荐
Leayh
05-22 13万+
背景 在一些搜索框中，我们往往需要监听键盘的按下(onkeydown)或抬起(onkeyup)事件以进行一些操作。在原生js或者jQuery中，我们需要判断e.keyCode的值来获取用户所按的键。这样就存在一个问题：我们必须知道某个按键的keyCode值才能完成匹配，使用起来十分不便。 keyCode 实际键值 48到57 0到9 65到90 a到z（...
vue.js监听键盘事件
丈哥SEO博客
12-09 3467
Vue监听键盘，直接用@绑定就可以，而且Vue为几个常用的按键提供了别名，不用去查询按键的keyCode 全部的按键别名 .enter .tab .delete //(捕获“删除”和“退格”键) .esc .space .up .down .left .right 一、input标签绑定esc键 <template></template> 中绑定事件 <input ...
Vue监听键盘回车事件@keyup.native和@keyup.enter.native
qq_39306992的博客
01-07 2万+
在监听键盘事件时，我们经常需要检查详细的按键。Vue 允许为 v-on 在监听键盘事件时添加按键修饰符： 只有在 key 是 Enter 时调用 vm.submit() <input v-on:keyup.enter="submit"> 可以直接将 KeyboardEvent.key 暴露的任意有效按键名转换为 kebab-case 来作为修饰符。 <input v-on:ke...
vue组件中监听键盘/按键事件
ymzhao
09-06 3277
问题描述： 组件监听键盘escape事件，vue提供的按键修饰器无法监听到组件整体上 解决方案： 将监听事件绑定在document上，销毁组件时，再移除该事件 created() { document.addEventListener('keyup', this.escEvent) }, methods: { escEvent(){ if(window?.event?.keyCode == 27) this.closeComp() }, closeComp() { // ... } }
vue 自定义键盘信息
FireBird_one的博客
03-05 1083
@keydown.up@keydown.enter@keydown.a/b/c....自定义键盘信息: Vue.config.keyCodes.ctrl=17; Vue.config.keyCodes.myenter=13;
Vue.js——vue-router路由，关于exact-active-class 和 active-class 的区别
程序员野蛮成长
03-25 1009
exact-active-class 和 active-class 的区别 router-link 默认情况下的路由是模糊匹配，例如当前路径是 /article/1 那么也会激活 ，所以当设置 exact-active-class 以后，这个 router-link 只有在当前路由被全包含匹配时才会被激活 exact-active-class 中的 class。 当用户访问 /article/1...
vue键盘事件修饰符
09-14
Vue.js 提供了键盘事件的修饰符，用于更方便地处理键盘事件。以下是一些常用的键盘事件修饰符： - `.enter`：监听 enter 键 - `.tab`：监听 tab 键 - `.delete`：监听 delete 键 - `.esc`：监听 esc 键 - `.space`...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值