electron快捷键
- 我们分为在主进程中注册快捷键和在渲染进程中注册快捷键
- 在主进程中我们有两种方式
一 利用[Menu]来模拟快捷键,只有app获得焦点时才生效,很少使用
const { Menu, MenuItem } = require('electron')
const menu = new Menu()
menu.append(new MenuItem({
label: 'Print',
accelerator: 'CmdOrCtrl+P',
click: () => { console.log('time to print stuff') }
}))
二 就是全局快捷键（意思就是不强求app获得焦点）,r所以这就不是模拟菜单事件了，我们要监听键盘，因为快捷键的根本操作就是响应键盘的按键
我们可以用globalShortcut来实现
- 引用globalShortcut模块
const { app, BrowserWindow, ipcMain, globalShortcut } = require('electron');
- 注册快捷键（在mac10.14 上，客户端没有被信任操作音视频的快捷键失效
const ret = globalShortcut.register('CommandOrControl+X', () => {
console.log('CommandOrControl+X is pressed')
});
- 检测是否注册成功
if (!ret) {
console.log('registration failed')
}
// 检查快捷键是否注册成功
console.log(globalShortcut.isRegistered('CommandOrControl+X'))
- 注销快捷键
app.on('will-quit', () => {
// 注销快捷键
globalShortcut.unregister('CommandOrControl+X')
// 注销所有快捷键
globalShortcut.unregisterAll()
})
2.在渲染进程中我们也有二种方式
一 可以利用浏览窗口监听键盘事件,这是一种常规的方式，自己判断什么键按下
window.addEventListener('keyup', doSomething, true)
注意第三个参数 true，这意味着当前监听器总是在其他监听器之前接收按键，以避免其它监听器调用 stopPropagation()。
二 我们可以利用第三方模块比如MOUSETRAP
- 安装模块,我们也可以用Script标签引入
npm install mousetrap --save
- 使用(我们在html页面引入index.js文件，文件内容如下)
const Mousetrap = require('mousetrap');
// #region 快捷键
// single keys
Mousetrap.bind('esc', () => {
console.log('escape');
}, 'keyup');
Mousetrap.bind('4', () => {
console.log('4');
})
Mousetrap.bind("?", () => {
console.log('show shortcuts!');
});
// combinations
Mousetrap.bind('command+shift+k', () => {
console.log('command shift k');
});
// map multiple combinations to the same callback
Mousetrap.bind(['command+k', 'ctrl+k'], () => {
console.log('command k or control k');
// return false to prevent default browser behavior
// and stop event from bubbling
return false;
});
// gmail style sequences
Mousetrap.bind('g i', () => {
console.log('go to inbox');
});
Mousetrap.bind('* a', () => {
console.log('select all');
});
// konami code!
Mousetrap.bind('up up down down left right left right b a enter', () => {
console.log('konami code');
});
// #endregion
- html文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<p>This is test pag!</p>
<script type="text/javascript" src="./views/js/index.js"></script>
</body>
</html>
开发工作中如果要主进程响应的就用全局快键盘，如果是页面中的快键操作，就可以直接用mousetrap。
electron快捷键的更多相关文章
- 从零开始学Electron笔记（四）
在之前的文章我们介绍了一下Electron的这个remote模块,接下来我们继续说一下Electron的右键菜单的制作. 在我们日常我们使用的软件中都会存在右键菜单的情况,比如我们用到的浏览器,开发所 ...
- Electron 项目在 Mac 下复制和粘贴快捷键失效的解决办法
公司的一个项目需要开发跨平台,由于整个项目完全由我一个人开发,本人也是初次接触 Electron,开发过程中遇到了不少坑,同样的代码 Windows 下复制和粘贴没有问题,Mac 下复制和粘贴失效,在 ...
- 使用electron为贪吃蛇游戏创建全局快捷键
上图就是我们的简体版贪吃蛇游戏,我们可以看到使用键盘上面的上下左右可以对贪吃蛇进行控制. The picture above is our simplified version of Snake Ea ...
- 【Electron】Electron开发入门（二）：创建项目Hello Word
创建简单的Electron程序 1.首先,切换到你的项目空间,我的在 D:\ProjectsSpace\ElectronProjects\ElectronTest,ElectronTest是案例项目文 ...
- 现在,以编程方式在 Electron 中上传文件,是非常简单的!
必要的上下文 想尽快熟悉上下文语境的,可以点这里: https://github.com/electron/electron/issues/749 这段讨论,其实本来是讨论如何自动设置 input 标 ...
- electron + vue 实践项目
github地址 本地安装环境准备 安装node: * https://nodejs.org/en/download/ 配置webpack: npm install -g webpack(sudo权限 ...
- electron 学习笔记
一.快速搭建一个electron 项目结构 # 克隆示例项目的仓库 $ git clone https://github.com/electron/electron-quick-start # 进入这 ...
- Electron: 从零开始写一个记事本app
Electron介绍 简单来说,Electron就是可以让你用Javascript.HTML.CSS来编写运行于Windows.macOS.Linux系统之上的桌面应用的库.本文的目的是通过使用Ele ...
- 关于electron的跨域问题，有本地的图片的地址，访问不了本地的图片
项目中有上传图片功能,自定义input type=file 改变透明度和超出部分隐藏,把按钮和 点击的图标放在上传文件的按钮上面,然后又碰到到获取input里面的图片的本地的路径, 在electron ...
随机推荐
- C# 代码往oracle数据库添加datetime格式列
C# 代码往oracle数据库添加datetime格式列时,不需要在insert语句中为datetime类型使用to_date函数
- 使用回车键执行input框事件
html: <input type="text" class="search-data-input" placeholder="请输入关键词&q ...
- mybatis中Insert后主键返回
1.Mapper的写法,返回的这个int是受影响的行号 int insertNewUser(User newUser); 2.xml的写法 <!--返回主键 形式1 --> <ins ...
- 基于Coravel定时任务之物联网设备数量统计
目录 基于Coravel定时任务之物联网设备数量统计 1 应用背景 2 对比各家定时库 2.1 TaskScheduler 2.2 Fluent Scheduler 2.3 Quartz.net 2. ...
- win7远程连接全屏和窗口模式切换
最近开发需要win7远程连接,我知道在连接的时候可以设置全屏模式 但是进去之后想要切换就只能通过快捷键了上网查了一下是ctrl+alt+break.网上说的没有错.我查官方文档也是这样.但是我按的时候 ...
- html5一些特性
html5可以理解为html+css+js 其目前可以解决:1.浏览器的兼容问题 2.统一web应用标准 3.解决文档结构定义不明确问题 4.解决web应用中的功能受限问题 5.是程序员编写的web应 ...
- ActiveMQ学习总结------实战操作（上）02
相信大家通过上一篇博文已经对ActiveMQ有了一个大致的概念了, 那么本篇博文将带领大家一步一步去实战操作我们的ActiveMQ 本篇主要内容: 1.ActiveMQ术语及API介绍 2.Activ ...
- SpringBootSecurity学习（21）前后端分离版之OAuth2.0非对称加密
JWT转换器 前面的例子中,都是在授权服务配置类中配置了一个很简单的jwt转换器,如下: 可以看到我们只用setSigningKey方法配置了一个秘钥,这里使用的是简单的对称加密的方式来加密jwt内容 ...
- Spring Boot WebFlux 增删改查完整实战 demo
03:WebFlux Web CRUD 实践 前言 上一篇基于功能性端点去创建一个简单服务,实现了 Hello .这一篇用 Spring Boot WebFlux 的注解控制层技术创建一个 CRUD ...
- js时间查询补充
先来看下JS中的日期操作: var myDate = new Date(); myDate.getYear(); //获取当前年份(2位) myDate.getFullYear(); //获取完整的年 ...