开发者社区

文档建议反馈控制台

文章/答案/技术大牛

发布

社区首页 >专栏 >JavaScript 监听组合按键

JavaScript 监听组合按键

作者头像

授客

发布于 2020-07-14 11:57:32

发布于 2020-07-14 11:57:32

3.1K00

代码可运行

举报

文章被收录于专栏：授客的专栏授客的专栏

运行总次数：0

代码可运行

1. 思路

如图，通过监听并打印键盘keydown事件，得到图示内容，观察发现，

当按下的组合键包含Ctrl键时，ctrlKey键会显示为true;

当按下的组合键包含Shift键、或者按键之前开启大写时，shiftkey键会显示为true;

当按下的组合键包含Alt键时，altKey键会显示为true;

当按下的组合键包含meta键（Mac电脑上是【⌘】、command键，非mac电脑为是win键时，metaKey键会显示为true）

另外，按下键时，可通过event获取对应键的ascii码，结合这些信息就可以对按键进行判断了。

2. 代码实例

按下键盘事件处理函数

    onKeyDown(event) {
           const keyCode = event.keyCode || event.which || event.charCode; // 有些浏览器除了通过keyCode获取输入键code，还可以通过which，charCode获取，这么写是出于浏览器兼容性考虑
            const keyCombination = event.ctrlKey ;
            if (keyCombination && keyCode == 75) {
                console.log("按下了Ctrl + k键");
            }
        }

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2020-07-12 ，如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自作者个人站点/博客前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与腾讯云自媒体同步曝光计划，欢迎热爱写作的你一起参与！

评论

登录后参与评论

暂无评论

编辑精选文章

换一批

万字详解高可用架构设计

Go 开发者必备：Protocol Buffers 入门指南

10分钟带你彻底搞懂分布式链路跟踪

多租户的 4 种常用方案

亿级月活的社交 APP，陌陌如何做到 3 分钟定位故障？

60页PPT全解：DeepSeek系列论文技术要点整理

网页屏蔽各种按键的代码分享

<script> //屏蔽鼠标右键、Ctrl+N、Shift+F10、F11、F5刷新、退格键 function document.oncontextmenu(){event.returnValue=false;}//屏蔽鼠标右键 function window.onhelp(){return false} //屏蔽F1帮助 function document.onkeydown(){ if((window.event.altKey)&& ((window.event.keyCode==37

用户1456630

2018/05/25

2.3K0

屏蔽(禁止)鼠标右键代码「建议收藏」

编程算法 bash bash 指令 java https

<body oncontextmenu=”return false” onselectstart=”return false” ondragstart=”return false” onbeforecopy=”return false” onmouseup=document.selection.empty() oncopy=document.selection.empty() onselect=document.selection.empty()></body>

全栈程序员站长

2022/09/07

3K0

用键盘8个键演奏一首蒲公英的约定送给996的自己或者一首月亮代表我的心给她

c#.net javascript 编程算法

用键盘8个键演奏一首蒲公英的约定送给996的自己或月亮代表我的心给七夕的她，非常简单~

wscats

2022/05/05

6700

用键盘8个键演奏一首蒲公英的约定送给996的自己或者一首月亮代表我的心给她

前端学习(53)~键盘事件

onmousewheel：鼠标滚轮滚动的事件，会在滚轮滚动时触发。但是火狐不支持该属性。

Vincent-yuan

2020/03/19

1.1K0

增强型的 <input type=number>

命令行工具 https 网络安全 html

input 标签的 number 类型提供了一种处理数字的好方法。我们可以使用min和max属性设置界限，并且可以通过向上和向下键来添加或减少1，如果设置step属性，则向上或向下键来添加或减少对应的 step 值。但是，如果我们想让用户以不同的step上下移动，该怎么办？

前端小智@大迁世界

2020/08/25

6600

vue键盘事件

在Vue.js中，键盘事件处理是一种常见的技术，用于响应用户在键盘上的按键操作。Vue提供了多种方式来处理键盘事件，包括常见的键盘修饰符和自定义键盘事件。

堕落飞鸟

2023/05/20

1.6K0

[Typecho小试牛刀]给Joe编辑器增加热键

打包 php javascript cdn

笔者博客目前使用的Typecho，主题使用的Joe。前面已经写过两篇相关的文章： [Typecho小试牛刀]Joe主题增加验证码（非插件方式） [Typecho小试牛刀]Joe主题增加文章目录（非插件方式）本文是第三篇，折腾的对象是编辑器。 Joe主题自带编辑器，界面美观，功能也很强大，美中不足是没有热键功能。下面就跟大家分享一下，如何给Joe编辑器增加热键。 [编辑器长这样] 预设背景本文假设目录结构如下 Typecho安装在/www/nongxue.top目录下 Joe主题文件位于/www/no

TDP-苏苏

2022/05/31

3.7K6

[Typecho小试牛刀]给Joe编辑器增加热键

react 监听键盘事件 hook

javascript react

import { useCallback, useEffect, MutableRefObject } from "react"; type keyType = KeyboardEvent["keyCode"] | KeyboardEvent["key"]; type keyFilter = keyType | Array<keyType>; type EventHandler = (event: KeyboardEvent) => void; type keyEvent = "keydown" | "k

小鑫

2022/04/25

2.3K0

图形编辑器开发：快捷键的管理

编辑器管理开发快捷键事件

假设我们需要判断用户是否按下了 Ctrl + C（需要精准匹配），如果按下了就执行 copy 方法。

前端西瓜哥

2023/08/18

4040

DOM的事件模拟

只有根据DOM2级事件实现这些事件的浏览器才返回true，以非标准方式支持这些事件的浏览器会返回false;

meteoric

2018/11/15

1K0

React实用手册

数据结构 webpack 打包 babel.js npm

React是一个开源(为数据提供渲染视图)的js库，它采用VirtualDOM、单向数据流的思想，主要用于数据大量变化，视图更新频繁的网页中，它具有以下特点：

越陌度阡

2020/11/26

1.1K0

Vue（27）vue-codemirror实现在线代码编译器 _

json ide python vue.js

如果我们想在Web端实现在线代码编译的效果，那么需要使用组件vue-codemirror，他是将CodeMirror进行了再次封装

落寞的鱼丶

2022/02/28

3.9K0

jQuery的事件模型

jquery 缓存存储数据结构

前几天自己着重读了jQuery1.11.1的源码，又结合了之前对DE事件模型的分析，最后也实现一个简陋的事件模型。 jQuery的事件系统离不开jQuery的缓存系统。 jQuery的第一代缓存是直接将数据存储在缓存体这个数据结构中，但是需要在元素上添加一个uuid来作为标示，标记在缓存体中的位置。但是仔细想想，就会发现，如果对window或者document进行事件侦听，就会在这两个对象上添加额外属性，会造成全局污染，不是很好。所以jQuery第二代缓存系统应运而生，这次不对元素进行添加属性，而

欲休

2018/03/15

9970

tampermonkey，采用js解析自定义脚本，实现网页列表数据采集分析

json http https javascript 网站

最近一直在做数据采集的事情，目的是使用java开发一套分析指定采集规则，模拟用户动作做数据提取。因此定义了一套动作脚本，open，click，get，list,opentab，closetab。。。 java解析脚本，调用phantomjs做数据提取，生成数据json文件，对外提供数据接口。采集引擎终于写的差不多了，虽然还有很多问题需要修改，但是终于不用加班了，嘿嘿嘿。-------jstarseven

大道七哥

2019/09/10

3.9K0

tampermonkey，采用js解析自定义脚本，实现网页列表数据采集分析

JavaScript 事件对象

html windows javascript

一．事件对象事件处理三部分组成：对象.事件处理函数=函数。例如：单击文档任意处。 document.onclick = function () { alert('Lee'); }; PS：以上程序的名词解释：click表示一个事件类型，单击。onclick表示一个事件处理函数或绑定对象的属性(或者叫事件监听器、侦听器)。document表示一个绑定的对象，用于触发某个元素区域。function()匿名函数是被执行的函数，用于触发后执行。除了用匿名函数的方法作为被执行的函数，也可以设置成独立的函数。 do

汤高

2018/01/11

2K0

使用JS监听键盘按下事件

event function 浏览器事件搜索

altKey、ctrlKey、shiftKey：当组合按下（如ctrl+c）时，ctrlKey会变为true

超级小的大杯柠檬水

2023/05/06

11.8K0

一文解读JavaScript事件对象和表单对象

javascript python

相信做网站对JavaScript再熟悉不过了，它是一门脚本语言，不同于Python的是，它是一门浏览器脚本语言，而Python则是服务器脚本语言，我们不光要会Python，还要会JavaScript，因为它对做网页方面是有很大作用的。

前端皮皮

2021/09/14

9970

一文解读JavaScript事件对象和表单对象

js键盘事件以及键盘事件拦截

一.键盘事件 onkeydown: 按下键盘时触发 onkeypress: 按下有值的键时触发注意: onkeypress按下 Ctrl、Alt、Shift、Meta 这样无值的键，这个事件不会触发对于有值的键，按下时先触发 keydown 事件，再触发这个事件 onkeyup:松开键盘时触发该事件二.组合键 ctrl相关 alt相关 meta （Mac键盘是一个四瓣的小花，Windows键盘是Windows键）相关 shift相关写一个举例其他都

小小咸鱼YwY

2020/06/19

6.6K0

B/S模式下如何使软件屏蔽系统热键

publicvoidHideAllFunction(Pagepage) { if(!

Java架构师必看

2021/03/22

6190

js实现键盘操作对div的移动或改变——-Day43

java javascript https 编程算法网络安全

言归正传，继续今天的记录，实际上在刚開始的时候，我以为能够非常快的实现这个功能，毕竟昨天记录了获取键盘按键的值的事件，有了值，无非就是针对不同值做不同的操作嘛，并且之前以前在写贪吃蛇时也用到过。结果一捯饬，又是好久的一段时间，所以感觉有必要记录下的，一方面确有可取之处，还有一方面也对自己的提醒，刚刚实现过的功能转头又是陌生人了，总的来说，算是温故而知新吧。

全栈程序员站长

2022/07/12

4.4K0

相关推荐

网页屏蔽各种按键的代码分享

更多 >

本文部分代码块支持一键运行，欢迎体验

本文部分代码块支持一键运行，欢迎体验