vue前端键盘事件

已于 2023-12-01 16:54:59 修改
阅读量341 收藏 6
点赞数 8
文章标签： vue.js 前端 javascript
于 2023-12-01 16:53:13 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/hangchuan_/article/details/134738944
版权
文章探讨了在Vue组件中使用`this`关键字时遇到的问题，特别是在全局键盘事件处理器中，通过`that=this`解决`this`的指向问题，并提及了与`searchTaskInfo()`方法的关联。
摘要由CSDN通过智能技术生成

调取不到键盘事件原因：this的指向问题

  mounted() {
//由于全局作用域的问题
    var that = this;
    document.onkeydown = function (e) {
      let e1 =
        e || event || window.event || arguments.callee.caller.arguments[0];
      if (e1 && e1.keyCode == 13) {
        that.searchTaskInfo();
      }
    };
  },

备注：searchTaskInfo()是methods中的方法

hangchuan_
关注
vue中键盘事件的触发
weixin_50656154的博客
07-13 4168
vue中键盘事件的触发 （按下回车、大小写键后触发事件... ）
vue基础之事件简写、事件对象、冒泡、默认行为、键盘事件实例分析
10-17
本文将详细介绍Vue中的事件简写、事件对象、事件冒泡、默认行为以及键盘事件，并结合实例来分析这些事件的用法。 首先，让我们来了解Vue中的事件简写。在Vue中，我们可以使用v-on指令或者其简写@来监听DOM事件，并...
vue对键盘事件进行监听
qq_43022682的博客
05-06 458
vue事件监听
Vue2键盘事件
weixin_64770583的博客
07-13 913
键盘绑定事件
vue2监听键盘事件
weixin_56647405的博客
04-03 296
vue使用addEventListener("keydown",this.handleKeyDown)监听键盘事件。
Vue常用的键盘事件
weixin_44037153的博客
08-22 453
2.空格键 space。right：键盘→键。
Vue键盘事件的使用
见证自己学习,成长的记录
03-08 4572
在vue中，我们经常会用到键盘事件，不管是我们按下某个键，其实都是一次键盘事件的调用，下面就介绍下Vue中的键盘事件先写一段代码，这里我选择的键盘事件是keyup,当然用keydown也是没问题的问题来了，什么按键都能触发事件，我们期望的是只能按下回车键才能打印输入的值， 那么：如何判断回车呢？如果我们想要绑定的按键不在vue提供的9个按键内，那该怎么办呢？比如我就想要用CapsLock(切换大小写)首先要知道：键盘上任意的一个按键都有自己的按键和编码。
Vue的键盘事件
安吉拉发大招呀
05-08 515
提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档 文章目录Vue的键盘事件 Vue的键盘事件 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script src="js/vue.js"></script> </head> <body> <!-- 1.
vue键盘事件
BBH2000的博客
03-30 136
一些vue常用的键盘事件
Vue学习笔记：键盘事件
薛定谔的猫
10-09 1637
像输入特殊的像CAPSlock这个键需要小写同时在中间加- caps-lock 因为这是两个不同的单词。没有效果，因为tab键也有从当前元素离开的效果。热键冲突了 所以不能用keyup,必须跟keydown。当然在提供的别名中也有特殊，例如tab键。在vue中也可以自己设置别名。如果vue中没有别名。
vue监听键盘事件的快捷方法【推荐】
10-18
在处理键盘事件时，Vue允许我们添加关键修饰符来简化事件处理逻辑。在本文中，我们将探索Vue中监听键盘事件的快捷方法，并通过一些实际例子来加深理解。 首先，了解基本的键盘事件监听是必要的。在Vue中，我们可以...
Vue 框架之键盘事件、健值修饰符、双向数据绑定
10-17
Vue 框架是当前流行的前端开发工具，其在构建用户界面时提供了许多便捷的功能，如键盘事件处理、键值修饰符以及双向数据绑定。在本文中，我们将深入探讨这三个核心概念。 一、键盘事件 在 Vue 中，可以通过 `v-on`...
原型链+instanceof+Vue底层原理
m0_65985318的博客
10-18 728
在 Vue 组件中，render 函数是一个选项，它返回一个虚拟节点 (VNode)，或者是一个包含多个 VNode 的数组。
深入解析：React中的信号组件与细粒度更新
Fisher的专栏
10-15 679
介绍了前端大火的signal原理，引入AutoStore为React提供了信号组件，帮助实现细粒度更新
《vue leaflet学习实践笔记》
yk_ddm的博客
10-16 172
目录vue leaflet学习实践笔记 vue leaflet学习实践笔记
Vue3动态组件component不生效问题解决方法
Java_fenxiang的博客
10-14 834
问题：vue3循环渲染动态组件component不生效，页面空白在vue3使用component动态组件展示组件时，组件就是不展示显示空白。在vue2中使用动态变量component展示组件都是没问题。试了很多方法 踩了很多坑，所以记录下：登录后复制 <div class="preview-list" id="c...
vue video播放m3u8监控视频
最新发布
YM_010530的博客
10-18 116
很关键的问题 vite创建的项目不需要import ‘videojs-contrib-hls’ 导入就报错。直接添加如下代码即可。
Vue 3 和 Vue Router 使用 createWebHistory 配置
liuchao的博客
10-16 284
在 Vue 3 项目中，如果使用 Vue Router 并希望启用 HTML5 History 模式，需要在创建路由器实例时传入作为历史模式的配置。此外，还需要确保在生产环境中设置正确的基本路径（base），这样才能正确处理前端路由。
【vue】指令补充+样式绑定+计算属性+侦听器
zxj20041003的博客
10-13 891
所谓指令修饰符就是让指令的 功能更强⼤，书写更便捷如何监听回⻋键？​ 答: 1、 @keydown.enter -> 回⻋按下​ 2、@keyup.enter -> 回⻋抬起如何阻⽌默认⾏为、阻⽌冒泡？​ 答: 1、@click.prevent -> 阻⽌默认⾏为​ 2、@click.stop -> 阻⽌冒泡​ 3、 @click.prevent.stop -> 可以链式调⽤, ⼆者都阻⽌v-model的3个修饰符的作⽤是什么？
vue前端数字键盘插件
07-22
你可以尝试使用 `vue-numeric-keyboard` 这个插件，它是一个Vue.js的数字键盘插件，方便地在前端实现数字键盘功能。该插件供了一些配置选，可以自定义键的样式和功能。你可以通过在Vue组件中引入插件，并在需要地方...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值