页面js实现快捷键监听

最新推荐文章于 2024-01-15 21:35:53 发布

weixin_30788619

最新推荐文章于 2024-01-15 21:35:53 发布

阅读量876

点赞数

文章标签：前端 ViewUI

原文链接：http://www.cnblogs.com/c-hao/p/3656914.html

版权

浏览器对键盘事件的监听是KeyBoardEvent事件。该事件的属性如下：

keyBoardEvent事件中，keyCode, keyIdentifier两个实现用于区分按键。常用的按键的keyCode keyIdentifier如下

    a     U+0041    65     
    b     U+0042    66     
    c     U+0043    67     
    d     U+0044    68     
    e     U+0045    69     
    f     U+0046    70     
    g     U+0047    71     
    h     U+0048    72     
    i     U+0049    73     
    j     U+004A    74     
    k     U+004B    75     
    l     U+004C    76     
    m     U+004D    77     
    n     U+004E    78     
    o     U+004F    79     
    p     U+0050    80     
    q     U+0051    81     
    r     U+0052    82     
    s     U+0053    83     
    t     U+0054    84     
    u     U+0055    85     
    v     U+0056    86     
    w     U+0057    87     
    x     U+0058    88     
    y     U+0059    89     
    z     U+005A    90     
    Esc   U+001B    27    
    F1    F1        112     
    F2    F2        113     
    F3    F3        114     
    F4    F4        115     
    F5    F5        116     
    F6    F6        117     
    F7    F7        118     
    F8    F8        119     
    F9    F9        120     
    F10   F10       121     
    F11   F11       122     
    F12   F12       123  

    Ctrl  Control   17
    Shift Shift     16
    Alt   Alt       18

组合键 Ctrl, Shift, Alt三个键可以和其他键一起使用形成组合键。写了个简单的例子用于方便组合键的注册。代码如下。

function compositeKey(k, fn) {
  var k = k || '';
  var fn = fn || function(){};

  var ks = k.split('+');
  if(ks.length < 2) {
    console.info('not composite key');
    return;
  }

  document.addEventListener('keydown', function(e) {
    var ctrl = e.ctrlKey,
        shift = e.shiftKey,
        alt = e.altKey;
    var keyIdent = e.keyIdentifier;

    if(ctrl && (ks.indexOf('ctrl') === -1)) {
      return;
    }

    if(shift && (ks.indexOf('shift') === -1)) {
      return;
    }

    if(alt && (ks.indexOf('alt') === -1)) {
      return;
    }

    if(e.keyCode > 47 && e.keyCode < 91) {
      keyIdent = String.fromCharCode(e.keyCode);
    }

    if(keyIdent.toLowerCase() === ks[ks.length-1]) {
      fn(e);
    }
  });
}

// 调用例子
compositeKey('ctrl+alt+w', function(e){console.log(e)});