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. 关于java构造器

    关于java的构造器.首先构造器并不会创建java对象,构造器知识负责执行初始化,在构造器执行之前,Java对象所需要的内存空间是由new关键字申请出来的.大部分时候,程序使用new关键字为一个Jav ...

  2. 【Python】【Algorithm】排序

    冒泡排序 dic = [12, 45, 22, 6551, 74, 155, 6522, 1, 386, 15, 369, 15, 128, 123, ] for j in range(1, len( ...

  3. React 传值 组件传值 之间的关系

    react 组件相互之间的传值: 传值分父级组件传值给子组件   子组件传值给父组件    平级组件.没有嵌套的组件相互传值 1.父组件向子组件传值 父组件通过属性的形式来向子组件传值,子组件通过pr ...

  4. 基于阿里云 ecs 使用 docker 方式部署 showDoc

    官网文档:https://www.showdoc.cc/help?page_id=65610 (建议先看下这个) 首先说明一下,我 ecs 镜像是 CentOS 7.6 64位 1. 首先在 服务器上 ...

  5. STL 较详尽总结

    STL就是Standard Template Library,标准模板库.这可能是一个历史上最令人兴奋的工具的最无聊的术语.从根本上说,STL是一些"容器"的集合,这些" ...

  6. Python利用ctypes实现C库函数调用

    0X00 ctypes 是强大的,使用它我们就能够调 用动态链接库中函数,同时创建各种复杂的 C 数据类型和底层操作函数.使得python也具备了底层内存操作的能力,再配合python本身强大的表达能 ...

  7. 数组队列如何手撕？解密ArrayBlockingQueue的实现内幕！

    队列 聊起队列,你一定会联想到一个与队列相似的数据结构:栈. 为了更好的理解什么是队列,我们将它和栈来比较一下: 队列的特点是:先进先出,如下图,1先进,1就先出. 图1:队列的图解 栈的特点是:先进 ...

  8. java 理论基础 类的初始化(加载、连接(验证、准备、解析)、初始化)

    一个进程就有一个JVM,每个进程之间资源独立 当调用java命令来启动某个Java程序的时候,该命令创建一个独立的进程来运行我们的Java程序.而这个独立的进程里面就包含一个Java虚拟机.不管该程序 ...

  9. Linux使用SCP命令不使用密钥直接进行远程复制(SSH免密登录)

    假设A服务器要把文件复制到B服务器上 首先我们要在A服务器上生成密钥对 参考:https://www.cnblogs.com/pxblog/p/14396409.html 然后在把生成的密钥公钥id_ ...

  10. ffmpeg(1)之libavutil/common.h:30:2: error: missing -D__STDC_CONSTANT_MACROS / #define __STDC_CONSTANT_MACROS

    说明 编译环境: mac osx 10.14 + cmake + clang++ 写了一个简单c++的范例调用ffmpeg函数完成音频采集 出错提示 [build] /usr/local/ffmpeg ...