• 我们分为在主进程中注册快捷键和在渲染进程中注册快捷键
  1. 在主进程中我们有两种方式

一 利用[Menu]来模拟快捷键,只有app获得焦点时才生效,很少使用

  1. const { Menu, MenuItem } = require('electron')
  2. const menu = new Menu()
  4. menu.append(new MenuItem({
  5.   label: 'Print',
  6.   accelerator: 'CmdOrCtrl+P',
  7.   click: () => { console.log('time to print stuff') }
  8. }))

二 就是全局快捷键（意思就是不强求app获得焦点）,r所以这就不是模拟菜单事件了，我们要监听键盘，因为快捷键的根本操作就是响应键盘的按键

我们可以用globalShortcut来实现

  • 引用globalShortcut模块
  1. const { app, BrowserWindow, ipcMain, globalShortcut } = require('electron');
  • 注册快捷键（在mac10.14 上，客户端没有被信任操作音视频的快捷键失效
  1. const ret = globalShortcut.register('CommandOrControl+X', () => {
  2.         console.log('CommandOrControl+X is pressed')
  3.     });
  • 检测是否注册成功
  1.  if (!ret) {
  2.         console.log('registration failed')
  3.     }
  4. // 检查快捷键是否注册成功
  5.     console.log(globalShortcut.isRegistered('CommandOrControl+X'))
  • 注销快捷键
  1. app.on('will-quit', () => {
  2.     // 注销快捷键
  3.     globalShortcut.unregister('CommandOrControl+X')
  5.     // 注销所有快捷键
  6.     globalShortcut.unregisterAll()
  7.   })

2.在渲染进程中我们也有二种方式

一 可以利用浏览窗口监听键盘事件,这是一种常规的方式，自己判断什么键按下

  1. window.addEventListener('keyup', doSomething, true)

注意第三个参数 true，这意味着当前监听器总是在其他监听器之前接收按键，以避免其它监听器调用 stopPropagation()。

二 我们可以利用第三方模块比如MOUSETRAP

  • 安装模块,我们也可以用Script标签引入

  2. npm install mousetrap --save
  • 使用(我们在html页面引入index.js文件，文件内容如下)
  1. const Mousetrap = require('mousetrap');
  3. // #region 快捷键
  4. // single keys
  5. Mousetrap.bind('esc', () => {
  6.    console.log('escape');
  7. }, 'keyup');
  8. Mousetrap.bind('4', () => {
  9.    console.log('4');
  10. })
  11. Mousetrap.bind("?", () => {
  12.    console.log('show shortcuts!');
  13. });
  14. // combinations
  15. Mousetrap.bind('command+shift+k', () => {
  16.    console.log('command shift k');
  17. });
  18. // map multiple combinations to the same callback
  19. Mousetrap.bind(['command+k', 'ctrl+k'], () => {
  20.    console.log('command k or control k');
  21.    // return false to prevent default browser behavior
  22.    // and stop event from bubbling
  23.    return false;
  24. });
  26. // gmail style sequences
  27. Mousetrap.bind('g i', () => {
  28.    console.log('go to inbox');
  29. });
  30. Mousetrap.bind('* a', () => {
  31.    console.log('select all');
  32. });
  34. // konami code!
  35. Mousetrap.bind('up up down down left right left right b a enter', () => {
  36.    console.log('konami code');
  37. });
  38. // #endregion
  • html文件
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.    <meta charset="UTF-8">
  5.    <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.    <meta http-equiv="X-UA-Compatible" content="ie=edge">
  7.    <title>Document</title>
  8. </head>
  9. <body>
  10.    <p>This is test pag!</p>
  11.    <script type="text/javascript" src="./views/js/index.js"></script>
  12. </body>
  13. </html>

开发工作中如果要主进程响应的就用全局快键盘，如果是页面中的快键操作，就可以直接用mousetrap。

electron快捷键的更多相关文章

  1. 从零开始学Electron笔记（四）

    在之前的文章我们介绍了一下Electron的这个remote模块,接下来我们继续说一下Electron的右键菜单的制作. 在我们日常我们使用的软件中都会存在右键菜单的情况,比如我们用到的浏览器,开发所 ...

  2. Electron 项目在 Mac 下复制和粘贴快捷键失效的解决办法

    公司的一个项目需要开发跨平台,由于整个项目完全由我一个人开发,本人也是初次接触 Electron,开发过程中遇到了不少坑,同样的代码 Windows 下复制和粘贴没有问题,Mac 下复制和粘贴失效,在 ...

  3. 使用electron为贪吃蛇游戏创建全局快捷键

    上图就是我们的简体版贪吃蛇游戏,我们可以看到使用键盘上面的上下左右可以对贪吃蛇进行控制. The picture above is our simplified version of Snake Ea ...

  4. 【Electron】Electron开发入门（二）：创建项目Hello Word

    创建简单的Electron程序 1.首先,切换到你的项目空间,我的在 D:\ProjectsSpace\ElectronProjects\ElectronTest,ElectronTest是案例项目文 ...

  5. 现在,以编程方式在 Electron 中上传文件,是非常简单的!

    必要的上下文 想尽快熟悉上下文语境的,可以点这里: https://github.com/electron/electron/issues/749 这段讨论,其实本来是讨论如何自动设置 input 标 ...

  6. electron + vue 实践项目

    github地址 本地安装环境准备 安装node: * https://nodejs.org/en/download/ 配置webpack: npm install -g webpack(sudo权限 ...

  7. electron 学习笔记

    一.快速搭建一个electron 项目结构 # 克隆示例项目的仓库 $ git clone https://github.com/electron/electron-quick-start # 进入这 ...

  8. Electron: 从零开始写一个记事本app

    Electron介绍 简单来说,Electron就是可以让你用Javascript.HTML.CSS来编写运行于Windows.macOS.Linux系统之上的桌面应用的库.本文的目的是通过使用Ele ...

  9. 关于electron的跨域问题，有本地的图片的地址，访问不了本地的图片

    项目中有上传图片功能,自定义input type=file 改变透明度和超出部分隐藏,把按钮和 点击的图标放在上传文件的按钮上面,然后又碰到到获取input里面的图片的本地的路径, 在electron ...

随机推荐

  1. LCX使用心得

    最近在搞内网渗透,碰到 端口转发&边界处理 的时候,我们就可以借助一些小工具了,这类工具有很多,这里主要说明lcx的用法. lcx是个很老的端口转发工具,而它的使用也很简单.不过想要把lcx玩 ...

  2. java数据结构——哈希表（HashTable）

    哈希表提供了快速的插入操作和查找操作,每一个元素是一个key-value对,其基于数组来实现. 一.Java中HashMap与Hashtable的区别: HashMap可以接受null键值和值,而Ha ...

  3. 理解JavaScript中的this关键字

    JavaScript中this关键字理解 在爬虫的过程中遇到了前端的js代码,对于this关键字理解的不是很清楚,所以写下这篇笔记,不足之处,希望得以改之. this的指向在函数定义的时候无法确定,只 ...

  4. 【Django】中间件，csrf，缓存，信号

    中间件(middleware) 描述:Middlewares 是修改 Django request 或者 response 对象的钩子. 在django中,中间件其实就是一个类,在请求到来和结束后,d ...

  5. MySQL 中间件汇总比较

    360 Atlas 较为活跃,Atlas 是由 360 Web平台部基础架构团队开发维护的一个基于 MySQL 协议的数据中间层项目.它是在mysql-proxy 0.8.2版本的基础上,对其进行了优 ...

  6. 【IT技术概念】WebAPI与传统的WebService有哪些不同？

    在.net平台下,有大量的技术让你创建一个HTTP服务,像Web Service,WCF,现在又出了Web API.在.net平台下,你有很多的选择来构建一个HTTP Services.我分享一下我对 ...

  7. POJ 2386——Lake Counting（DFS）

    链接:http://poj.org/problem?id=2386 题解 #include<cstdio> #include<stack> using namespace st ...

  8. hover和position共用出现的问题

    hover  鼠标移入的样式 position  定位属性 包含 relative  相对定位   absolute  绝对定位为     fixed 固定定位 hover作用范围 可以实现自己样式的 ...

  9. MongoDB 学习笔记之 分析器和explain

    MongoDB分析器: 检测MongoDB分析器是否打开: db.getProfilingLevel() 0表示没有打开 1表示打开了,并且如果查询的执行时间超过了第二个参数毫秒(ms)为单位的最大查 ...

  10. 电信资源管理系统:基于 H5 叠加 OpenLayers3 GIS

    前言 通过结合 HTML5 和 OpenLayers 可以组合成非常棒的一个电信地图网络拓扑图的应用,形成的效果可以用来作为电信资源管理系统,美食定位分享软件,片区找房,绘制铁轨线路等等,各个领域都能 ...