vue 项目中使用键盘回车或空格按键触发事件

这篇具有很好参考价值的文章主要介绍了vue 项目中使用键盘回车或空格按键触发事件。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

话不多说上代码!!!

一开始以为很复杂,经过一番摸索和查找,发现也没有那么难,具体如下:

1、先在 created 里边开启键盘按键的监听事件,如下:

created() {
    window.addEventListener('keydown', this.handkeyCode, true)//开启监听键盘按下事件
},

2、在 methods 里边添加按键之后需要执行的方法即可,具体如下:

methods:{
    // 回车和空格键提交右侧信息
    handkeyCode(e) {
       console.log(e); // 打印出按键后的信息
       if(e.keyCode === 13 || e.keyCode === 32){
           console.log('触发了回车/空格键');
       }
    },
}

解析:e.keyCode 是每个按键的编码,13是回车键,32是空格键

至此完成键盘按键触发事件的方法

测试有效!!!文章来源地址https://www.toymoban.com/news/detail-503976.html

到了这里,关于vue 项目中使用键盘回车或空格按键触发事件的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • vue+ElementUI el-table表格单元格编辑增加键盘事件功能(向上、向下、回车键盘事件)

    1、如果单元格编辑使用了插槽功能,需要在插槽上添加一个class(这个类即:当前列的porp值) 2、porp不能重复(正常也不会存在) GitHub源码地址 Gitee源码地址 基于ElementUi或Antd再次封装基础组件文档 TTable组件封装地址

    2024年02月11日
    浏览(61)
  • vue3和ts的el-input的键盘回车绑定事件

    el-input框绑定键盘回车搜索事件 加上@keyup.enter.native=\\\"search\\\" 然后   第二种方法:作用在input元素身上 在html中 然后

    2024年02月04日
    浏览(44)
  • Vue键盘按键别名/事件说明及案例

    Vue中的按键别名(): 回车 = enter 删除 = delete (退格 、 删除 按键) 退出 = esc 空格 = space 换行 = tab (必须配合 keydown 去使用) 上 = up 下 = down 左 = left 右 = right 如果没有内置别名可以 组合: 组合类 = shift + tab 监听事件: keydown :当用户按下任意键时触发。 keyup :当用户释

    2024年01月18日
    浏览(41)
  • Vue中 如何监听键盘事件中的按键

    在Web前端开发中,键盘事件的处理是非常常见的需求之一。而在Vue框架中,如何监听键盘事件中的按键是一个相对简单但又很实用的功能。本文将为你介绍如何在Vue中监听键盘事件,并演示一些常用的按键操作。 首先,在Vue中监听键盘事件的方式有两种:一种是直接在DOM元素

    2024年02月20日
    浏览(40)
  • 微信小程序input监听键盘完成事件、回车事件

    微信小程序中,输入框输入内容,需要输入完成后点击键盘完成事件后触发搜索 bindconfirm=“事件名称”

    2024年02月14日
    浏览(44)
  • 如何给 el-input 添加键盘回车事件

    查找 Element UI 的 input输入框组件(el-input组件),都没有发现可以给输入框添加的回车键监听事件,因为Element UI对其做了进一步封装,想要直接添加 @keydown(或者@keyup.enter)是无效的。 要想在el-input中实现回车键监听事件,需要在@keyup.enter后面加上.native,即 那么 .native 是如

    2024年02月16日
    浏览(58)
  • js获取键盘按键事件、判断键盘按键事件、调用键盘按键事件

    第一:获取键盘按键事件 第二:判断键盘按键事件 第三:调用键盘按键事件

    2024年02月11日
    浏览(52)
  • ASP.NET WebForm中在TextBox输入框回车时会触发其他事件,如何处理?

    在ASP.NET WebForm中,在页面中按键盘上的回车键,会自动触发某些事件,但是这并不是我们想要的效果,我们可以设置将其取消,那如何处理呢? 前台代码:   后台在Page_Load中设置代码:  代码示例:     在ASP.NET WebForm中,在页面中按键盘上的回车键,需要自定义设置触发某

    2024年02月15日
    浏览(33)
  • 键盘按键事件 通过键盘上下左右按键移动界面上图标

    #main.c文件 #include “keyevent.h” #include int main(int argc, char *argv[]) { QApplication a(argc, argv); KeyEvent w; w.show(); } #include “keyevent.h”//头文件 #ifndef KEYEVENT_H #define KEYEVENT_H #include #include #include class KeyEvent : public QWidget { Q_OBJECT public: KeyEvent(QWidget *parent = 0); ~KeyEvent(); void drawPix(); void keyPre

    2024年02月09日
    浏览(51)
  • 基于MFC的键盘响应(热键触发事件)

    通过输入 CTRL + G 组合按键完成文件选择框弹出: 目标: 按下 CTRL + G ,弹出文件选择框 过程: 头文件添加消息申明 cpp文件添加消息映射 OnInitDialog添加全局热键注册 实现热键功能函数 MFC键盘宏定义: 功能键: VK_TAB : Tab键。 VK_SPACE : 空格键。 VK_BACK : 退格键(回退键)。

    2024年02月04日
    浏览(44)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包