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. SpringMVC(2)：JSON

    一,JSON 介绍 JSON (JavaScript Object Notation, JS 对象简谱) 是一种轻量级的数据交换格式.易于人阅读和编写,同时也易于机器解析和生成,并有效地提升网络传输效 ...

  2. 02_ubantu常用软件安装

    软件更新-----------------------------------------------------------------进入系统后,什么也不要做,先去更新软件:如果网速慢的话,可以稍 ...

  3. @Deprecated注解功能

    @Deprecated注解功能 标记不建议使用的方法,但是仍然可以用 当方法有更好的方法替换时,但是此方法还有使用时可以使用该注解

  4. 【手帐】Bullet Journal教程

    最近觉得自己的日程记录本有待提高,于是从今年开始开始入坑了手帐. *内容源自Bullet Journal官网.https://bulletjournal.com/pages/learn 快速笔记 Bu ...

  5. 【C/C++】例题3-6 环状序列/算法竞赛入门经典/数组和字符串

    [字典序比较] 对于两个字符串,比较字典序,从第一个开始,如果有两位不一样的出现,那么哪个的ASCII码小,就是字典序较小.如果都一样,那么短的小. [题目] 输入一个环状串,输出最小的字典序序列. ...

  6. 转：Java IO

    转自:http://www.cnblogs.com/rollenholt/archive/2011/09/11/2173787.html [案例1]创建一个新文件 ? 1 2 3 4 5 6 7 8 ...

  7. 【CF1591】【数组数组】【逆序对】#759（div2）D. Yet Another Sorting Problem

    题目:Problem - D - Codeforces 题解 此题是给数组排序的题,操作是选取任意三个数,然后交换他们,确保他们的位置会发生改变. 可以交换无限次,最终可以形成一个不下降序列就输出&q ...

  8. ABP VNext框架中Winform终端的开发和客户端授权信息的处理

    在ABP VNext框架中,即使在它提供的所有案例中,都没有涉及到Winform程序的案例介绍,不过微服务解决方案中提供了一个控制台的程序供了解其IDS4的调用和处理,由于我开发过很多Winform项 ...

  9. .net Core 使用 iTextSharp 生成PDF 简单示例

    在 Nuget 中导入需要的插件: 实现的代码: 1 [HttpGet, Route("CreatePdf")] 2 public Response CreatePdf() 3 { ...

  10. 【LeetCode】263. Ugly Number 解题报告（Java & Python）

    作者: 负雪明烛 id: fuxuemingzhu 个人博客: http://fuxuemingzhu.cn/ 目录 题目描述 题目大意 解题方法 除去2,3,5因子 日期 [LeetCode] 题目 ...