JavaScript 监听组合按键思路及代码实现

JavaScript监听组合按键

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键");

   }

  }

到此这篇关于JavaScript 监听组合按键思路及代码实现的文章就介绍到这了,更多相关JavaScript 监听组合按键内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • javascript 组合按键事件监听实现代码

    javascript 组合按键事件监听实现代码 JS组合按键事件监听,支持同时监听多组按键如{a,b,c,}{ctrl,c}. 实例代码: <script type="text/javascript"> (function(){ /** *dqKeys v1.0.0 | (c) 2016 www.findme.wang *@params json keys 监听的按键 *@params bool isOrder 按键是否有相应的顺序 *@params Function su

  • JS监听组合按键思路及实现过程

    前言 我们经常用到组合键,例如alt+f4,crtl+enter.在开发中也会有这种需求. 组合键类型 单独组合,二键组合,三键组合 思路 1.获取键盘上的按键 2.阻止浏览器上的默认行为 3.执行自定义的js函数 代码例子 document.onkeydown = function(e) { var keyCode = e.keyCode || e.which || e.charCode; var altKey = e.altKey ; if(altKey && keyCode == 1

  • JavaScript 监听组合按键思路及代码实现

    JavaScript 监听组合按键思路及代码实现

    JavaScript监听组合按键 1. 思路 如图,通过监听并打印键盘keydown事件,得到图示内容,观察发现, 当按下的组合键包含Ctrl键时,ctrlKey键会显示为true; 当按下的组合键包含Shift键.或者按键之前开启大写时,shiftkey键会显示为true; 当按下的组合键包含Alt键时,altKey键会显示为true; 当按下的组合键包含meta键(Mac电脑上 是 [⌘].command键,非mac电脑为 是win键时,metaKey键会显示为true 另外,按下键时,可通

  • JavaScript监听触摸事件代码实例

    这篇文章主要介绍了JavaScript监听触摸事件代码实例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 监听 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="initial-scale=1, maximum-scale=1, use

  • Python脚本实现监听服务器的思路代码详解

    开前准备 Schedule使用方法. 基本的Linux操作 Python3环境 Step1 首先我得先假设你会了如何每十五分钟去运行一次检查这件事情.(后期我会补上如何去做定时任务,相信我!) 代码量比较少,选择在Linux环境下直接写脚本. import os #使用os的popen执行bash命令 content=os.popen("lsof -i:8080").read() 输出一下content看看,就是命令行执行输出的内容,看关键词webcache,但是输出的已经是文本文件了

  • JS实现移动端实时监听输入框变化的实例代码

    JS实现移动端实时监听输入框变化的实例代码

    如果是在pc端,监听输入框你可能想到focus.blur.hover.onkeyup这些事件,但是如果是在移动端使用使用这些事件用户体验极差,因为你要用户收起键盘并且再点个空白处才生效,甚至还存在很大的兼容差异.那么怎么解决呢? 方案一 以前做一个简单的模糊搜索框的需求,大致思路是定义一个1s左右执行的定时器,定时器函数里面的逻辑是 判断文本框内容的长度,如果跟上一次长度有变化,就走一遍查询,如果没有变化不执行任何操作. 方案二 利用jquery提供的 input propertychange

  • JavaScript监听文本框回车事件并过滤文本框空格的方法

    本文实例讲述了JavaScript监听文本框回车事件并过滤文本框空格的方法.分享给大家供大家参考.具体如下: <script type="text/javascript" language="javascript"> var username = null; var password = null; //获取文本框 onload = function() { username = document.getElementById("txtUser

  • JavaScript监听一个DOM元素大小变化

    1.需求场景 开发过程中经常遇到的一个问题就是如何监听一个 div 的size变化. 比如我用canvas绘制了一个chart,当canvas的size发生变化的时候,需要重新绘制里面的内容,这个时候就需要监听resize事件做处理.window上虽然有resize事件监听,但这并不能满足我们的需求,因为很多时候,div的size发生了变化,实际 window.resize 事件并未触发. 对于div的resize事件的监听,实现方式有很多,比如定时器检查,通过scroll事件等等,本文主要介绍

  • Android 中的监听和按键处理详情

    Android 中的监听和按键处理详情

    目录 各种监听 按键处理 onKeyDown() onBackPressed() Fragment中监听Back返回键 各种监听 我们来练习下各种监听.我们在 TextView 上添加了触摸监听,在 Button 上添加了长按监听,在 Spinner 下拉框选项发生变化的时候添加了监听,在 ListView 选中选项时增加了监听. xml <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

  • JavaScript监听手机物理返回键的两种解决方法

    JavaScript没有监听物理返回键的API,所以只能使用 popstate 事件监听. 有两个解决办法: 1.返回到指定的页面 pushHistory(); window.addEventListener("popstate", function(e) { window.location = 'http://www.baidu.com'; }, false); function pushHistory() { var state = { title: "title&quo

  • 使用vue与jquery实时监听用户输入状态的操作代码

    实现效果:input未输入值,按钮禁用 jquery操作代码: html <input type="text" name="" placeholder="请输入用户名" id="userName" > <button class="disabled" id="login">登录</button> css .disabled { pointer-even

随机推荐