vue学习笔记（一）键盘触发事件

最新推荐文章于 2025-06-23 23:32:28 发布

原创最新推荐文章于 2025-06-23 23:32:28 发布 · 2.4k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#键盘触发事件

vue的小方法专栏收录该内容

0 篇文章

订阅专栏

本文介绍在页面设计中如何使用键盘事件，特别是在登录页中利用回车键触发提交操作的方法。文章详细列举了常见键盘按键的别名，并展示了如何在Vue框架中通过v-on指令绑定键盘事件。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

键盘触发事件
在写页面时遇见了登录页需要加一个键盘回车事件，所有找到了所有的触发事件，在此记下。

键盘别名

名字	别名
回车	.enter
换行	.tab
删除/退格	.delete
空格	.space
esc	.esc
上移	.up
下移	.down
左移	.left
右移	.right

用法
这是用了vue中的v-on，如下

<input v-on:keyup.enter="submit">

即<input @keyup.enter="submit">

但是若在组件框架中写需要加.native

<el-input v-model="password" placeholder="请输入密码" @keyup.enter.native="search()"></el-input>

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

weixin_44426772

关注关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

Vue键盘事件

m0_71088505的博客

06-30

887

（1）配合keyup使用：按下修饰键的同时，再按下其他键，随后释放其他键，事件才被触发。自定义键盘绑定事件CapsLock写的时候是俩单词要分开写，并且中间要用横杠连接。换行=====tab（特殊，必须配合keydown使用）删除=====delete（捕获“删除”和“退格”键）（2）配合keydown使用：正常触发事件。右=======right。回车=====enter。空格=====space。下=======down。左=======left。推出=====esc。上=======up。

Vue键盘事件用法（流量充值项目记录）

weixin_30940783的博客

11-15

116

<label for="haha">键盘事件：</label> <input class="ipt" @keyup="keyFun" v-model="tel" name="haha"/> 　　 keyFun(event){ if (event.keyCode!=8&&event.keyCo...

参与评论您还未登录，请先登录后发表或查看评论

Vue按键事件

最新发布

tianzhiyi1989sq的博客

06-23

604

/ 在main.js或入口文件中f1: 112,f2: 113,// 添加更多自定义按键...

键盘的触发事件

qq_36594703的博客

05-24

1289

import java.awt.BorderLayout; import java.awt.event.KeyEvent; import java.awt.event.KeyListener; import javax.swing.JFrame; import javax.swing.JLabel; import javax.swing.JScrollPane; import javax.swi

vue 中的按键事件

dog_m的博客

06-03

1716

一. 按键别名在vue中, keyCode 的事件用法已经被废弃了并可能不会被最新的浏览器支持。 Vue 提供了绝大多数常用的按键码的别名： .enter .tab .delete (捕获“删除”和“退格”键) .esc .space .up .down .left .right 同时可以通过全局 config.keyCodes 对象修改别名的方法： // 可以使用 `v-on:keyup.f1` Vue.config.keyCodes.f1 = 112 二. 基本语法 keydown 是在键盘按下就

初学Vue(学习笔记 一) day one

01-20

还可以使用修饰符如`.prevent`阻止默认行为，`.stop`阻止事件冒泡，`.once`只触发一次事件，以及组合使用这些修饰符。 Vue的事件处理还包括了按键修饰符，如`.enter`、`.delete`、`.up`等，可以用来指定监听特定的...

Vue2学习笔记(尚硅谷天禹老师)

weixin_44992737的博客

04-24

2005

Vue可以看作是一个数据管理大师，其目的通常是将其管理的数据展示到HTML页面上，或者收集HTML页面上的数据进行储存在自身或者传递给服务器。

vue学习笔记（超详细）

m0_67392126的博客

03-06

1092

文章目录一. Vue基础认识Vue.js Vue安装方式 Vue的MVVM 二. Vue基础语法生命周期模板语法创建Vue, options可以放什么语法综合 v-on v-for遍历数组 v-model表单绑定 v-model结合radio类型使用 v-model结合checkbox类型使用 v-model结合select类型使用值绑定修饰符检测数组更新计算属性 computed 计算属性setter和getter computed / meth

Vue学习笔记（尚硅谷天禹老师）

m0_67391907的博客

03-06

1428

Vue学习笔记（尚硅谷天禹老师讲解） 1. Vue核心 1.1. Vue简介 1.1.1. 官网英文官网中文官网 1.1.2. 介绍与描述动态构建用户界面的渐进式JavaScript框架作者：尤雨溪 1.1.3. Vue的特点遵循MVVM模式编码简洁，体积小，运行效率高，适合移动/PC端开发它本身只关注UI，可以引入其它第三方库开发项目 1.1.4.与其他JS框架的关联借鉴 Angular 的模板和数据绑定技术借鉴 React 的组件化和虚拟DOM

【Vue学习笔记_05】v-on事件监听

weixin_44752429的博客

11-25

555

【Vue学习笔记_05】v-on事件监听v-on方法参数v-on修饰符案例-点击切换选中目标配套可执行代码示例 => GitHub v-on指令：绑定事件处理方法，可以简写为@ v-on方法参数情况一：事件处理方法没有参数。v-on为事件绑定方法时小括号可以省略，也可以不省略。情况二：事件处理方法需要参考，且v-on绑定方法时传递了相应的参数。这种情况是最常见的。情况三：事件处理方法本身需要参数，但v-on绑定方法时省略了小括号，这时Vue会默认将浏览器生成的event事件对象作为第一个参数传

Vue键盘事件用法总结

11-26

这两天学习了Vue.js 感觉组件这个地方知识点挺多的，而且很重要，所以，今天添加一点小笔记,学习一下Vue键盘事件 键盘事件 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> [removed][removed] [removed] [removed] = function () { var vm = new Vue({ el: '#

KeyPress 和KeyDown 、KeyUp之间的区别

AlecZhang1992的博客

08-21

347

KeyPress主要用来捕获数字(注意：包括Shift+数字的符号)、字母（注意：包括大小写）、小键盘等除了F1-12、SHIFT、Alt、Ctrl、Insert、Home、PgUp、Delete、End、PgDn、ScrollLock、Pause、NumLock、{菜单键}、{开始键}和方向键外的ANSI字符 KeyDown 和KeyUp 通常可以捕获键盘除了PrScrn所...

Vue之键盘事件

chaofei_liang的博客

09-24

1990

1.使用keydown触发事件 window.onload=function(){ new Vue({ el:'#box', data:{ },

Vue的键盘事件

安吉拉发大招呀

05-08

566

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档文章目录Vue的键盘事件 Vue的键盘事件 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script src="js/vue.js"></script> </head> <body> <!-- 1.

Vue中的键盘事件

dd的博客

04-07

3196

对于 type=checkbox 或 type=radio 的 input 元素，每当用户切换控件（通过触摸、鼠标或键盘）时，input 事件都应该触发。与 keyup 事件一起使用时，该按键必须在事件发出时处于按下状态。在contenteditable 和 designMode 的情况下，事件的 target 为当前正在编辑的宿主。属性替代，这个属性表示键盘上的物理键（与按键生成的字符相对），但是目前在一些浏览器中并未实现。代表着一个唯一标识的所按下的键的未修改值，它依据于一个系统和实现相关的数字代码。

15.Vue的键盘事件