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 == 112) {
        alert("组合键成功")
      }
      e.preventDefault();
      return false;
    }

解刨

e.keyCode || e.which || e.charCode

谷歌浏览器对event.keyCode,event.charCode和event.which都兼容。

火狐浏览器对event.keyCode部分键值有效，如上下左右键(37,38,39,40)，enter键(13)，PgUp(33),PgDn(34)等部分有效，对数字键，字母键无效。

event.which也是部分键值有效，如字母键，数字键，enter键，Backspace键等有效，对上下左右键，PgUp(33),PgDn(34)键无效。

event.charCode也是对部分键值有效，如字母键，数字键，，Backspace键等有效，对enter键，上下左右键，PgUp(33),PgDn(34)键无效。

ie浏览器中，IE8及以下浏览器对event.charCode无效，event.keyCode和event.which对大部分键值能获得，但是有少部分也不能获得。

所以该写法为兼容写法。

e.altKey，e.shiftKey，e.ctrlKey，e.metaKey

用来监听键盘上的alt，shift，ctrl，meta键。当按下这些键的时候，值会变为true。

e.preventDefault()

阻止默认事件，在W3C标准和IE下，处理方式不太一致。分别是执行e.preventDefault()方法和将e.returnValue = false属性。当然如果你使用的jquery等类库的话，只需要写一个e.preventDefault()就可以了，它帮你做到了兼容。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (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

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

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

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

  • 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

  • js监听鼠标点击和键盘点击事件并自动跳转页面

    js监听鼠标点击(onmousedown)和键盘点击(onkeydown)事件并自动跳转页面,在学习的朋友可以参考下 $(function(){ var i = 0; document.onmousedown=function(event){ if(i==1){ window.open('http://www.njxblog.com'); } //setTimeout(function (){window.open('http://www.jb51.net')},2000); //定时不太好使,

  • 两种js监听滚轮事件的实现方法

    前段时间在写前端的时候,需要监听浏览器的滚轮事件 网上查了一下,找到两种监听滚轮事件的方法: 一.原生js通过window.onscroll监听 //window.onscroll = function() {//为了保证兼容性,这里取两个值,哪个有值取哪一个 var scrollTop = document.documentElement.scrollTop || document.body.scrollTop; //scrollTop就是触发滚轮事件时滚轮的高度 } 二.Jquery通过$(

  • js监听input输入框值的实时变化实例

    1.在元素上同时绑定 oninput 和onporpertychanger事件 例: <script type="text/JavaScript"> function aa(e){alert("inputting!!");} </script> <input type="text" id="a" oninput="aa(event)" onporpertychange=&quo

  • node.js监听文件变化的实现方法

    node.js监听文件变化的实现方法

    前言 随着前端技术的飞速发展,前端开发也从原始的刀耕火种,向着工程化效率化的方向发展.在各种开发框架之外,打包编译等技术也是层出不穷,开发体验也是越来越好.例如HMR,让我们的更新可以即时可见,告别了手动F5的情况.其实现就是监听文件变化自动调用构建过程.下面就关注下如何实现node监听文件变化. 场景 假定要监听index.js,每当内容更改重新编译. 我们就用简单的console来标识执行编译.下面就是实现该功能. node原生API fs.watchFile 翻下node的文档就会看到一个

  • js监听html页面的上下滚动事件方法

    最近在一个项目中,在写前端页面的时候,想像以前做Android时在页面时刻监听上下滚动的事件,查找资料发现由鼠标或类似用户动作触发的事件有以下图示: 不多说了,直接上代码了,经过测试可以使用: <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>Dome</title> <script type="text/javascript

  • vue 纯js监听滚动条到底部的实例讲解

    在网页中,我们会遇到很多在滚动条到底部的时候有数据正在加载的事件,那么怎样用vue去实现这样的内容呢?本篇只给出一个雏形,结合vue的生命周期用纯javascript写的一个监听函数,后续操作数据库的部分暂且不议. 1.怎样用纯js判断滚动条是否到底部? 先了解几个关键词: (1)滚动条到顶部的位置:scrollTop (2)当前窗口内容可视区:windowHeight (3)滚动条内容的总高度:scrollHeight 触发监听的函数是: window.onscroll = function(

  • JS监听事件的叠加和移除功能

    html DOM元素有很多on开头的监听事件,如onload.onclick等,见DOM事件列表.但是同一种事件,后面注册的会覆盖前面的: window.onresize = function(){ alert(1); } window.onresize = function(){ alert(2); } // 改变窗口大小时,只会弹出2 addEventListener监听 利用addEventListener添加监听事件,可以重复添加,并不会互相覆盖: window.addEventList

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

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

随机推荐