首页 > 其他分享 >事件处理_3键盘事件

事件处理_3键盘事件

时间:2023-01-10 17:46:25浏览次数:37  
标签:事件处理 console name 键盘 事件 keyCode log

事件处理_3键盘事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <script src="../js/vue.js"></script>
</head>
<body>

    <!-- 
        1、Vue中常用按键的别名:
            回车:enter
            删除:delete(捕获“删除”和“退格键”)
            退出:esc
            空格:space
            换行:tab(特殊,必须配合keydown去使用)
            上:up
            下:down
            左:left
            右:right

        2、Vue未提供别名的按键,可以使用按键原始的key值去绑定,但注意要转为kebab-case(短横线命名)、

        3、系统修饰键(用法特殊):ctrl、alt、shift、meta
            (1)配合keyup使用:按下修饰键的同时,再按下其他键,随后释放其他键,事件才能触发
            (2)配合keydown使用:正常触发事件

        4、也可以使用keyCode去指定具体的按键(不推荐)

        5、Vue.config.keyCodes.自定义键名 = 键码  可以去定制按键别名
     -->

    <div id="root">
        <h2>欢迎来到{{name}}学习</h2>
        <input type="text" placeholder="按下回车提示输入" @keyup.ctrl="showInfo">
    </div>
    
    <script>
        new Vue({
            el:'#root',
            data:{
                name:'尚硅谷'
            },
            methods: {
                showInfo(e){
                    console.log(e.key,e.keyCode)
                    // if(e.keyCode != 13) return 
                    // console.log(e.target.value)
                }
            },
        })
    </script>
</body>
</html>

标签:事件处理,console,name,键盘,事件,keyCode,log
From: https://www.cnblogs.com/tanhongwei/p/17040928.html

相关文章

  • 事件处理_2事件修饰符
    事件处理_2事件修饰符<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>事件修饰符</title><scriptsrc="../js/vue.js"></script>......
  • 7. 等待一个事件
    等待一个事件在多线程开发中,当一个线程的运行条件是另外一个线程的运算结果的时间,等待线程通常有几种处理方法1.循环查询,知道满足条件为止2.休眠一个固定的时间,然后查......
  • Unity+Pico 响应射线事件
    1、添加组件为了让场景内的物体能够响应射线的操作,需要在该物体上添加“XRSimpleInteractable”组件,并对射线的交互事件编写脚本看,最常用的是“Hover”和“Select”事件......
  • elementui表格中实现点击单个单元格和表头--带参数触发事件/跳转路由
    对于element表格做点击跳转的功能有两大类:1,表头的点击跳转2,表格内容单元格进行点击跳转是因为该表格只有tabs标签也第二个选项被选中的时候才能让他起效果,所以先做判断,第......
  • WPF 虚拟键盘
    NuGet画廊|Hs.KeyBoard.WPF2.0.2dotnetaddpackageHs.KeyBoard.WPF--version2.0.2说明:1、支持执行前台事件2、支持命令绑定3、支持修改回车文本显示4、支持获取焦......
  • Vue中全局事件总线
    Vue中全局事件总线1:全局事件总线2:示例代码结构3:代码内容vue.config.jsconst{defineConfig}=require('@vue/cli-service')module.exports=defineConfig({transpi......
  • 前端高级进阶-事件循环
    事件循环浏览器的进程模型何为进程?程序运行需要有它自己专属的内存空间,可以把这块内存空间简单的理解为进程每个应用至少有一个进程,进程之间相互独立,即使要通信,也需要......
  • 【开源代码】运动模糊时准确检测和定位线段,通用的帧事件特征融合网络
    以下内容来自从零开始机器人SLAM知识星球每日更新内容点击领取学习资料→机器人SLAM学习资料大礼包论文##开源代码#DetectingLineSegmentsinMotion-blurredImag......
  • Flutter 陈航 23-事件循环 Event Loop 异步 线程 Isolate
    本文地址目录目录目录23|单线程模型怎么保证UI运行流畅?EventLoop事件循环模型微任务队列异步任务Future简单案例官方综合案例改造后的案例异步函数同步等待await不......
  • mysql定时事件设置
    //查看事件调度器是否开启SHOWVARIABLESLIKE'event_scheduler';//开启事件调度器SETGLOBALevent_scheduler=ON;//创建定时事件DELIMITER$$CREATEEVENTIFNOTE......