JS组合按键事件监听插件

Tauri 2.0.0-rc 全局快捷方式插件实战:从安装到事件监听 本文详细介绍了在Tauri 2.0.0-rc桌面应用中集成全局快捷方式插件的完整实战流程。从环境准备、插件安装(包括Rust依赖与前端绑定),到通过前端JavaScript与后端Rust两种方式注册全局快捷键,并实现前后端事件通信,最后总结了权限配置、冲突处理等关键避坑指南,帮助开发者快速为应用添加强大的跨平台全局热键功能。 阅读详情
<script type="text/javascript">
	  (function(){
	  	/**
	  	*dqKeys v1.0.0 | (c) 2016  www.findme.wang
	  	*@params json keys  监听的按键
	  	*@params bool isOrder  按键是否有相应的顺序
	  	*@params Function sucFuc  完成按键的回调函数
	  	*@params Function cancelFuc  完成按键取消后的回调函数
	  	*@author lidequan 
	  	*/
	  	var dqKeys = function(keys,isOrder,sucFuc,cancelFuc) {
	        // 函数体
	        return new dqKeys.fn.init(keys,isOrder,sucFuc,cancelFuc);
	    }
	    dqKeys.fn = dqKeys.prototype = {
	    	'version':'1.0.0',    //版本号
	    	'author':'lidequan',  //作者
	    	'rightKeys':{},      //监听的按键{key:code},code为按键对应的ascii码 
	    	'curKeys':[],        //当前按下的键
	    	'sucFuc':null,       //完成按键的回调函数
	    	'cancelFuc':null,    //完成按键取消后的回调函数
	    	'isFinsh':false,    //判断是否完成按键
	    	'isOrder':false,    //按键是否有相应的顺序
	    	init:function(keys,isOrder,sucFuc,cancelFuc){
	    		this.rightKeys=keys;
	    		this.sucFuc=sucFuc;
	    		this.cancelFuc=cancelFuc;
	    		this.isOrder=isOrder;
	    		
	    		return this;
	    	},
	    	listenkeys:function(){//监听用户键盘操作	    		
	    		var _self=this;
	    		_self.addListener('keydown', function(oEvent){
	    			var oEvent =oEvent || window.event;
					if(!_self.arrayContain(_self.curKeys,oEvent.keyCode)){
					 	if(_self.isOrder && _self.getNextKey() == oEvent.keyCode){
					 		_self.curKeys.push(oEvent.keyCode);
					 	}else if(!_self.isOrder){
					 		_self.curKeys.push(oEvent.keyCode);
					 	}
				 	}
				 	if(_self.checkResult(_self.rightKeys,_self.curKeys)){
				 		if(_self.sucFuc && !_self.isFinsh){
				 			_self.sucFuc();
				 		}
				 		_self.isFinsh=true;
				 	}
	    		});
	    		_self.addListener('keyup', function(oEvent){
	    			var oEvent =oEvent || window.event;					
					if(_self.checkResult(_self.rightKeys,_self.curKeys) && _self.isFinsh){		
						//完成按键,又取消的事件
						if(_self.cancelFuc){
				 			_self.cancelFuc();
				 		}
					}

					_self.curKey=_self.remove(_self.curKeys,oEvent.keyCode);
					_self.isFinsh=false;
	    		});
	    	},
	    	arrayContain:function(arr,val){//判断数组中是否包含某个元素
					return (arr.indexOf(val) == -1) ? false:true;
			},
			checkResult:function(json,arr){ //判断用户是否按下监听的所有按键
				for(var i in json){
					 if(arr.indexOf(json[i])==-1){
						 return false;
					 }
				 }
				return true;
			},
			remove:function(arr,val) {  //从数组中移除某个元素			
				var index = arr.indexOf(val); 
				if (index > -1) { 
					arr.splice(index, 1); 
				} 
				return arr;
			},
			getNextKey:function(){ //获取下一次按键对应的ascii码
				for(var i in this.rightKeys){
					if(this.curKeys.indexOf(this.rightKeys[i])==-1){
						 return this.rightKeys[i];
					 }
				}
				return null;
			},
			addListener:function(ev,fn,bool){  //事件绑定
			    if (document.attachEvent) {  
			        document.attachEvent('on' + ev, fn);  
			    }else{   
			        document.addEventListener(ev,fn,bool);  
			    }  
			}

	    }
	    dqKeys.fn.init.prototype = dqKeys.fn;
   		window.dqKeys = window.$$= dqKeys;
	  })();

    //1.测试
	dqKeys({'a':65,'b':66},true,function(){
									console.log('okey');
								},function(){
									console.log('cancel');
								}).listenkeys();

	//2.测试
	var dqKeys=new $$({'c':67,'d':68},false,function(){
									console.log('keys down ');
								},function(){
									console.log('keys cancel');
								});
	dqKeys.listenkeys();
	</script>


        
基于Video.js的前端视频播放器快捷键插件实战项目 Video.js通过JavaScript封装原生HTML5<video>元素,提供统一API接口。初始化时需引入CSS和JS文件,并通过创建实例:});该过程动态生成包含控件栏、加载提示等组件的DOM结构,基于组件化架构管理播放器生命周期。是一个为 Video.js 播放器提供键盘快捷操作支持的社区主流插件,广泛应用于教育平台、视频点播系统和企业级多媒体应用中。 阅读详情

相关推荐

构建具有进度条和音量控制功能的JS播放器

HTML5 Audio API 是构建现代 Web 应用程序中不可或缺的组件之一,它允许开发者直接在网页中嵌入音频播放功能,无需依赖第三方插件。通过使用这一API,开发者可以灵活地控制音频的播放、暂停、音量调节以及处理音频事件等,大大丰富了网页交互的体验。在Web开发中,事件驱动模型是一种常见的交互机制,它允许用户与网页元素进行互动,从而触发一系列由JavaScript控制的事件处理。事件监听器则是这一模型的核心组成部分,负责在特定事件发生时执行预定义的代码块。事件驱动模型由事件的触发和监听组成。

weixin_42124497的博客 1207

自定义js完成键盘事件监听

用快捷方式输入罗马字符 /** * @ProjectName: sfhk * @Author: 小王 * @Date: 2021/1/21 23:26 * @Description: 监听键盘事件打出罗马字符,这里需要Alt+数字1~0替换罗马字符1~10 * 键盘事件对应的键码: *keyCode 48 = 0 equal braceright *keyCode 49 = 1 exclam onesuperior *keyCode 50 = 2 quotedbl twosuperior

camel_gold的博客 501

西门子博图指令(定时器操作三)

西门子博图定时器中复位定时器功能指令介绍

yue008的博客 8873

js 监听组合按键

其中key为你第一次的按键,后面的xxKey是你第二次按下的键名被触发,会在event中出现这个参数并且值为true。方法将一个事件处理函数绑定到。

qq_38508172的博客 1675

三极管简单振荡电路实现:从零开始的实战示例

通过一个基础实例,手把手教你如何利用三极管构建简单的振荡电路,深入理解三极管在实际电路中的工作原理与应用技巧。

weixin_32836713的博客 1202

EBS开发_创建AP付款

--以下代码于20181002在Tony环境测试通过 /* BEGIN   --mo_global.init('SQLAP');   apps.fnd_global.apps_initialize(user_id =&gt; 1110, resp_id =&gt; 50597, resp_appl_id =&gt; 20003);   --mo_global.set_policy_context(...

蜗牛先生快跑的博客 4767

Key管理设备按键事件

Key管理设备按键事件

casey的博客 3154

STM32G0/G4电机控制中三角函数与浮点运算优化实战

三角函数(sin/cos)和浮点运算是电机矢量控制(FOC)的核心基础,直接影响Clark/Park变换、SVPWM及观测器的实时性与精度。在资源受限的MCU上,标准math.h库因无硬件FPU支持而引发严重时序抖动,导致电流环延迟、转矩脉动增大甚至系统复位。通过硬件加速(如STM32G4的CORDIC协处理器)或定制化定点算法(如STM32G0的查表+线性插值),可将sin/cos计算从数十微秒压缩至1–3 μs量级,提升30倍以上效率。该方案广泛适用于BLDC/PMSM驱动、伺服控制及高动态响应嵌入式运

weixin_35751412的博客 109

JS_plus.key.addEventListener监听键盘按键

【代码】JS_plus.key.addEventListener监听键盘按键。

小歪博客 910

GD32F4xx 移植agile_modbus软件包与电能表通信

GD32F4XX 移植agile modbus软件包实现与DTSU电能表通信调试记录

madao1234的博客 1304

A133在Android13上适配百兆以太网

NOTE] 【技术支持问题】问题背景/平台。

mangofu的博客 412

vue的app监听返回键

document.addEventListener('plusready', function (a) { var first = ''; plus.key.addEventListener('backbutton', function () { //获取地址栏目中的url var urls = location.hash.split('/')[1] ...

菜鸟的博客 3205

4、分布式发电系统中用于改善电能质量的有源、无源和混合滤波器

本文探讨了分布式发电系统中,尤其是光伏(PV)系统运行过程中引入的电能质量问题,并分析了有源滤波器、无源滤波器及混合滤波器在改善电能质量方面的应用。文章详细介绍了光伏系统的建模、最大功率点跟踪(MPPT)技术,以及谐波、电压波动等技术问题,同时对各类滤波器的拓扑结构和控制方法进行了系统性总结。通过仿真实例比较了不同滤波器在减少谐波方面的效果,为实际工程应用提供了参考依据。

transformer2023的博客 89

CKEditor 4 textwatcher 插件按键过滤机制解析:从 movementkeys 手动测试到源码验证

本篇文章以仓库中 `tests/plugins/textwatcher/manual/movementkeys.md` 这一 Bender 手动测试用例为切入点,深入讲解 CKEditor 4 的 [textwatcher](https://link.gitcode.com/i/e86b433f1c8296f3a1d10d2f168d6068) 插件如何过滤光标移动键与修饰键、避免触发无意义的文本

gitblog_01015的博客 262

Windows 下 OpenClaw(小龙虾) 安装全记录:从零到一的保姆级图文教程(持续更新中)

本文主要介绍了Windows 下 OpenClaw 安装全记录:从零到一的保姆级图文教程,希望能对学习使用OpenClaw 的同学们有所帮助。 文章目录 1. 背景 2. 实战教程 2.1 步骤一 安装Node.js 2.2 步骤二:安装并配置OpenClaw 2.3 步骤三:配置模型 2.4 步骤四:对话 3. 后续使用步骤

weixin_43178406的博客 16万+

visio安装包

Microsoft Office Visio 是一款专业的制图软件。利用经过更新的形状、协作工具和数据链接图表,创建专业级图表以简化复杂的信息。

几款js键盘捕捉插件[转]

1、shortcut.js 下载地址:http://www.openjs.com/scripts/events/keyboard_shortcuts/shortcut.js 下面内容主要为官方文档的翻译,但也加入了一些我的理解。 使用说明 该类主要有两个方法组成:shortcut.add()、shortcut.remove(),下面分别介绍: shortcut.add(key,fu...

jsczxy2 487

数学建模模型总结

这是本人在两年内准备参加数学建模竞赛搜集到的模型资料,已经经过了本人的筛选和整理,希望能够对准备参加数学建模竞赛的学弟学妹们提供一些帮助!

Javascript jQuery 快捷键插件 Firefox热键屏蔽

//usage:$(dom).keyman({key:"D",ctrl:true,callback:func}); $.fn.keyman = Keyman; function Keyman( opts ){ var CTRL = opts.ctrl||false; var SHIFT = opts.shift||false; var ALT = opts.alt||fal

1480

IDEA的使用指南

IDEA基于java的使用手册,可以最快速的上手,在使用中不断的丰富自己的使用技巧.

终极指南:30分钟掌握Mousetrap.js键盘快捷键库

Mousetrap.js是一个轻量级的JavaScript键盘快捷键库,它让开发者能够轻松地为Web应用程序添加强大的键盘快捷键功能。这个简单但功能丰富的库只有2KB大小,无需任何外部依赖,支持所有主流浏览器。😊 ## 为什么选择Mousetrap.js? Mousetrap.js提供了无与伦比的灵活性和易用性。与其他快捷键库相比,它具有以下独特优势: 🔑 **无框架依赖** - 不需要

gitblog_00876的博客 1087

解决UEditor快捷键冲突:自定义按键映射完全指南

你是否遇到过UEditor编辑器快捷键与浏览器或其他应用冲突的问题?本文将详细介绍如何通过配置文件和代码修改,自定义UEditor的快捷键映射,解决冲突问题。 ## 快捷键冲突的常见场景 在使用UEditor富文本编辑器时,快捷键冲突是常见问题。例如,UEditor默认的保存快捷键`Ctrl+S`可能与浏览器的保存网页功能冲突,导致无法正常使用编辑器的保存功能。 UEditor的快捷键配置主

gitblog_00219的博客 1070

3步集成Mousetrap:打造极致键盘交互体验的轻量级JavaScript库

在当今Web应用追求极致用户体验的时代,键盘快捷键已成为提升生产效率的关键要素。Mousetrap作为一个专注于键盘事件处理的轻量级JavaScript库,以其简洁的API设计和卓越的性能表现,为开发者提供了构建高效键盘交互的完美解决方案。本文将深入解析Mousetrap的核心架构、应用场景和最佳实践,帮助技术决策者和开发者充分挖掘这一工具的价值。 ## 键盘快捷键管理的技术挑战与Mousetr

gitblog_00048的博客 200

Johnny-Five Pin 模块实战指南:引脚读写、事件监听与状态查询

本指南以 Johnny-Five 官方 [Pin 文档](https://link.gitcode.com/i/bdd4d3fac0057d35475ba3b244945ad8) 为主线,结合 [lib/pin.js](https://link.gitcode.com/i/29c5c6f6144a3cb60c4b394f2a906f0c) 源码实现与 [test/pin.js](https://l

gitblog_00222的博客 259

告别复杂键盘事件处理:Mousetrap让网页快捷键绑定如此简单

你是否还在为网页中的键盘快捷键处理而烦恼?编写繁琐的事件监听代码,处理不同浏览器间的兼容性问题,还要考虑各种组合键和序列键的情况?现在,有了Mousetrap这个轻量级的JavaScript库,这一切都变得简单了。本文将带你深入了解Mousetrap的API,学会如何轻松绑定和触发键盘事件,让你的网页交互体验更上一层楼。 ## Mousetrap简介 Mousetrap是一个用于处理JavaS...

gitblog_00963的博客 1035

从键盘到手势:Mousetrap.js触摸设备适配完全指南

Mousetrap.js是一款轻量级的JavaScript键盘快捷键处理库,能够帮助开发者轻松实现网页中的键盘交互功能。随着移动设备的普及,如何让基于Mousetrap.js开发的应用在触摸设备上也有良好的用户体验,成为了前端开发中的重要课题。本文将详细介绍如何使用Mousetrap.js及其插件,为触摸设备构建流畅的交互体验。 ## 为什么需要触摸设备适配? 在传统的桌面应用中,键盘快捷键极

gitblog_01087的博客 657

深入HumanInput插件体系:读懂example_plugin源码,3步写出你的自定义输入事件插件

HumanInput 是一个体积极小(gzip 后仅约 8.1kb)、零外部依赖的 JavaScript 人体输入事件库,专门用来优雅地处理键盘快捷键、鼠标手势、触摸、手柄、语音识别等"人类产生"的事件。本文面向新手,带你读懂它的插件体系,并看懂 [src/example_plugin.js](https://link.gitcode.com/i/b96993d456d99c65fb6ff280e

gitblog_00614的博客 363

SuperCopy插件原理与实战:解锁网页复制限制的前端技术解析

在Web前端开发中,CSS的user-select属性和JavaScript事件监听是控制网页文本选择与复制行为的核心技术。user-select: none; 能够禁止用户选中特定区域的文本,而JavaScript可以通过拦截copy、selectstart等事件来阻止默认复制操作,这些机制常用于保护版权内容、防止UI误选或在线考试防作弊。从技术价值看,这些限制在保护内容的同时,也可能影响用户正常的资料摘录与学习体验。因此,浏览器扩展工具应运而生,它们通过注入CSS规则和干预事件监听,在客户端临时解除限制

weixin_33946605的博客 310

CKEditor 4 IME 组合输入(Composition Input)手动测试指南:验证日文、中文、阿拉伯文输入的正确性与稳定性

本文基于 CKEditor 4 仓库中的手动测试用例 [tests/core/editable/manual/typeime.md](https://link.gitcode.com/i/332794218523c9b05a94d8c51e876416) 及其配套页面 [tests/core/editable/manual/typeime.html](https://link.gitcode.co

gitblog_00649的博客 375
上一篇: Nginx中unknown directive "if(!-e"解决方案
下一篇: 解决OneThink中无法异步提交kindeditor文本框中修改后的内容
我爱默小兜
博客等级 码龄14年 387粉丝 266原创
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明:

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

余额充值