1. 概述

老话说的好：宁愿自己吃亏，也不让他人吃亏。

言归正传，今天我们来聊聊 VUE3 的 键盘事件。

2. 键盘事件

2.1 敲击任意键触发事件

<body>

    <div id="myDiv"></div>

</body>

<script>

    const app = Vue.createApp({     // 创建一个vue应用实例

        methods : {

            myKeydown() {

                console.info("myKeydown");

            },

        },

        template : `

            <div>

              <input @keydown="myKeydown" />

            </div>

        `

    });

    const vm = app.mount('#myDiv');  // 绑定id为 myDiv 的元素

2.2 仅敲击回车触发事件

        template : `

            <div>

              <input @keydown.enter="myKeydown" />

            </div>

        `

2.3 Tab键触发事件

        template : `

            <div>

              <input @keydown.tab="myKeydown" />

            </div>

        `

2.4 退格（Backspace）或 Delete 键触发

        template : `

            <div>

              <input @keydown.delete="myKeydown" />

            </div>

        `

2.5 上下左右键触发

        template : `

            <div>

              <input @keydown.up="myKeydown" />

            </div>

        `
        template : `

            <div>

              <input @keydown.down="myKeydown" />

            </div>

        `
        template : `

            <div>

              <input @keydown.left="myKeydown" />

            </div>

        `
        template : `

            <div>

              <input @keydown.right="myKeydown" />

            </div>

        ` 

3. 综述

今天聊了一下 VUE3 的 键盘事件，希望可以对大家的工作有所帮助

欢迎帮忙点赞、评论、转发、加关注 ：）

关注追风人聊Java，每天更新Java干货。

4. 个人公众号

追风人聊Java，欢迎大家关注

VUE3 之 键盘事件的更多相关文章

  1. html中键盘事件----在路上（16）

    键盘事件,这里以onkeyup为例: 解析:当在一个input中输入文本时,在另一个div中输出文本 在下面是本人写的小demo,供分享. 代码如下: <!DOCTYPE html> &l ...

  2. js键盘事件和焦点事件

    键盘事件onkeydown //当键盘按下的时候触发onkeyup //但键盘抬起的时候触发event.keyCode //数字类型 键盘按键的键值功能键 ctrlkey shiftkey altke ...

  3. 深入理解DOM事件类型系列第二篇——键盘事件

    × 目录 [1]类型 [2]顺序 [3]按键信息[4]应用 前面的话 鼠标和键盘是电脑端主要的输入设备,上篇介绍了鼠标事件,本文将详细介绍键盘事件 类型 键盘事件用来描述键盘行为,主要有keydown ...

  4. jquery键盘事件总结

    在工作中在发现同事在写输入密码按键的相关js效果时,发现自己对于这块很是不了解,这几天特地了解了一下,进行以下总结: 一.首先要知道键盘事件的几个属性: 1.keydown():在键盘按下时触发. 2 ...

  5. C#/winform 自动触发鼠标、键盘事件

    要在C#程序中触发鼠标.键盘事件必须要调用windows函数. 一.鼠标事件的触发 1.引用windows函数mouse_event /// <summary> /// 鼠标事件 /// ...

  6. js键盘事件

    弱鸡今天在写键盘事件,发生一个小bug,排查了1小时(">皿<)可恶的浏览器竟然还不报错!!原因是将e.ctrlKey写成了e.ctrLKey,o(ﾟДﾟ)っ 想想都要生气< ...

  7. Javascript 事件对象（六）键盘事件

    keyCode获取用户按下键盘的哪个按键 <!DOCTYPE HTML> <html> <head> <meta http-equiv="Conte ...

  8. js键盘事件全面控制详解

      js键盘事件全面控制 主要分四个部分第一部分:浏览器的按键事件第二部分:兼容浏览器第三部分:代码实现和优化第四部分:总结 第一部分:浏览器的按键事件 用js实现键盘记录,要关注浏览器的三种按键事件 ...

  9. windows程序里新窗体不在任务栏显示，无标题拖动，键盘事件，始终显示在主窗体上面，单实例运行等

    不显示在任务栏,Alt+Tab也不显示 protected override CreateParams CreateParams { get { const int WS_EX_APPWINDOW = ...

随机推荐

  1. 监控网站是否异常的shell脚本

    本节内容:shell脚本监控网站是否异常,如有异常就自动发邮件通知管理员. 脚本检测流程,如下:1,检查网站返回的http_code是否等于200,如不是200视为异常.2,检查网站的访问时间,超过M ...

  2. Spring Cloud Alibaba 整合 Nacos 实现服务配置中心

    在之前的文章 <Nacos 本地单机版部署步骤和使用> 中,大家应该了解了 Nacos 是什么?其中 Nacos 提供了动态配置服务功能 一.Nacos 动态配置服务是什么? 官方是这么说 ...

  3. Reids安全加固

    目录 一.简介 二.加固方案 一.简介 Redis 因配置不当存在未授权访问漏洞,可以被攻击者恶意利用. 在特定条件下,如果Redis以root身份运行,黑客可以给root账号写入SSH公钥文件,直接 ...

  4. 什么是mysql innodb cluster？

    目录 一.简介 二.特性 一.简介 MySQL InnoDB集群提供了一个集成的,本地的,HA解决方案.MySQL InnoDB集群由以下几部分组成: MySQL Servers with Group ...

  5. DDS协议解读及测试开发实践

    DDS概述 DDS是OMG在2004年发布的中间件协议和应用程序接口(API)标准,它为分布式系统提供了低延迟.高可靠性.可扩展的通信架构标准.DDS目前在工业.医疗.交通.能源.国防领域都有广泛的应 ...

  6. Samba 源码解析之内存管理

    由于工作需要想研究下Samba的源码,下载后发现目录结构还是很清晰的.一般大家可能会对source3和source4文件夹比较疑惑.这两个文件夹针对的是Samba主版本号,所以你可以暂时先看一个.这里 ...

  7. 【WP】攻防世界-杂项-Misc

    长期更新一波 攻防世界 的杂项题解 这东西主要靠积累吧 攻防世界:https://adworld.xctf.org.cn 因为攻防世界的题目顺序经常变化,我也不改序号了,顺着之前写的位置往下写,推荐使 ...

  8. JAVA日记之mybatis-3一对一,一对多,多对多xml与注解配置

    1.Mybatis多表查询1.1 一对一查询1.1.1 一对一查询的模型用户表和订单表的关系为,一个用户有多个订单,一个订单只从属于一个用户 一对一查询的需求:查询一个订单,与此同时查询出该订单所属的 ...

  9. Python语言的2个典型特性

    [动态编程语言] 学习过C.C++的同学都知道,使用这二者编写代码时,变量在使用前必须通过类似"int a=123"的语句提取申明,然后在真正赋值的时候校验取值跟类型是否相符.也就 ...

  10. 如何完成符合ISO 26262要求的基于模型设计（MBD）的测试

    背景介绍 随着汽车行业的迅速发展,汽车的复杂程度不断增加,越来越多的汽车电子控制系统具有与安全相关的功能,因此对ECU的安全要求也越来越高.复杂的软件功能,将会带来大量的软件风险问题,如何保证软件的安 ...