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

 更新时间:2020年04月17日 16:26:09   作者:经典鸡翅  
这篇文章主要介绍了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()就可以了,它帮你做到了兼容。

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

相关文章

  • JavaScript Window 打开新窗口(window.location.href、window.open、window.showModalDialog)

    JavaScript Window 打开新窗口(window.location.href、windo

    本文主要介绍了JavaScript Window 打开新窗口的三种方式,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2023-05-05
  • 基于JavaScript实现购物车功能

    基于JavaScript实现购物车功能

    这篇文章主要为大家详细介绍了基于JavaScript实现购物车功能,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-02-02
  • Bootstrap学习笔记之js组件(4)

    Bootstrap学习笔记之js组件(4)

    这篇文章主要为大家详细介绍了Bootstrap学习笔记之js组件,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2016-06-06
  • 基于Bootstrap使用jQuery实现输入框组input-group的添加与删除

    基于Bootstrap使用jQuery实现输入框组input-group的添加与删除

    这篇文章主要介绍了基于Bootstrap使用jQuery实现输入框组input-group的添加与删除的相关资料,需要的朋友可以参考下
    2016-05-05
  • 如何通过JS实现日历简单算法

    如何通过JS实现日历简单算法

    这篇文章主要介绍了如何通过JS实现日历简单算法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2020-10-10
  • JavaScript利用img实现前端页面埋点功能

    JavaScript利用img实现前端页面埋点功能

    做数据分析的时候需要获取足量的有效数据,这个时候就需要我们在前端页面埋点。如何来实现一个前端埋点功能,本文就带你上手试试
    2022-06-06
  • 微信小程序比较两个数大小的实现方法

    微信小程序比较两个数大小的实现方法

    最近在工作中遇到一个需求,可以自动对比两个数的大小,下面这篇文章主要给大家介绍了关于微信小程序比较两个数大小的实现方法,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
    2022-03-03
  • JavaScript调用堆栈及setTimeout使用方法深入剖析

    JavaScript调用堆栈及setTimeout使用方法深入剖析

    Javascript中会经常用到setTimeout来推迟一个函数的执行并且会在执行到这句话后延迟1秒钟来弹出alert窗口,接下来将介绍一下JavaScript调用堆栈和setTimeout用法,感兴趣的你可不要错过了哈
    2013-02-02
  • JS 用6N±1法求素数 实例教程

    JS 用6N±1法求素数 实例教程

    显然,当N≥1时,6N,6N+2,6N+3,6N+4都不是素数,只有形如6N+1和6N+5的自然数有可能是素数。所以,除了2和3之外,所有的素数都可以表示成6N±1的形式(N为自然数)。
    2009-10-10
  • js 创建对象 经典模式全面了解

    js 创建对象 经典模式全面了解

    下面小编就为大家带来一篇js 创建对象 经典模式全面了解。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-08-08

最新评论