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. linux下把一个用户从某个组中删除，而不删除用户

    查看当前用户/登录用户 基本语法 whoami / who am I 用户组 介绍 类似于角色,系统可以对有共性的多个用户进行统一的管理. 新增组 语法 groupadd 组名 案例演示 添加test ...

  2. react18 来了，我 get 到...

    大家好! 本文主要是关于即将发布的 react 18 的新特性.那么 react18 带来了什么呢? 详情可以关注 github React 18 工作组仓库 1. automatic batchin ...

  3. 8、Redis五大数据类型---哈希(Hash)

    一.哈希(Hash)简介: Redis hash 是一个string类型的field和value的映射表,hash特别适合用于存储对象. Redis hash 是一个键值对集合. 二.常用命令 1.h ...

  4. pipeline groovy

    目录 一.变量 一.变量 1.直接定义 def x="abc" 2.从脚本执行结果赋值变量 branch = "/jen_script/return-branch.sh ...

  5. 2020ACTF pwn writeup

    为了打2021的ACTF,想着把2020年的pwn题做一做吧,发现2020年的pwn题质量还挺高的.反倒是2021年的题目质量不太高,好像是没有专门的pwn师傅出题,可以理解,毕竟办校赛,说白了就是用 ...

  6. CF984B Minesweeper 题解

    Content 有一个 \(n\times m\) 的扫雷地图,请判断这个地图是否合法,即对于所有格子,是否满足: 对应点的数字周围必须有对应数字个雷 空的地方周围没有雷 数据范围:\(1\leqsl ...

  7. Java面向对象之 接口： [修饰符] interface 接口名 {...}；子接口：[修饰符] interface 接口名 extends 父接口，父接口2...{...}

    1.什么是接口? 类比抽象类,把功能或者特性类似的一类 抽象的更彻底,可以提炼出更加特殊的"抽象类"----接口 2.如何定义接口 语法:  [修饰符] interface 接口名 ...

  8. Linux 主从数据库

    主从数据库 主数据库的内容同步传输到附属数据库 客户访问附属数据库 这样做保证了数据库的稳定性 需要两台虚拟机 两边个虚拟机都要操作 配置hosts文件 进入/etc/hosts追加输入 192.16 ...

  9. video标签实现多个视频循环播放

    <head> <!-- If you'd like to support IE8 (for Video.js versions prior to v7) --> </he ...

  10. VS2010 sp1离线下载地址和在线下载地址

    地址是:http://www.msdn1.cn/8/42/ 下载: edk2 + 迅雷, 稳的1P