Question

从另一个stackoverflow帖子（How can I add a JavaScript keyboard shortcut to an existing JavaScript Function?）我有这个热键代码：

function doc_keyPress(e) {
    if (e.shiftKey && e.keyCode == 80) {
       //do something
    }
}

document.addEventListener('keyup', doc_keyPress, false);

使用两个键。但是有三个键，例如shift + l + m，它不起作用。

if语句将是：

if (e.shiftKey && e.keyCode == 76 && e.keyCode == 77) {}

再次这不起作用。

如何使用shift + l + m。

Answer 1

使用闭包，我会设想你可以做这样的事情

var doc_keypress = (function() {
    var prevWasL = false;
    return function(e) {
        if (e.type == 'keypress') {
            if (e.shiftKey && !(e.ctrlKey || e.metaKey)) {
                if (prevWasL) {
                    if (e.charCode == 77) {
                        console.log('doing it');
                        prevWasL = false;
                        return; 
                    }
                }
                if (e.charCode == 76) {
                    prevWasL = true;
                    return;
                }
            }
            prevWasL = false;
        } else { // keyup
            if (e.key == 'Shift') {
                prevWasL = false;
            }
        }
    }
}());

document.addEventListener('keypress', doc_keypress);
document.addEventListener('keyup', doc_keypress);

添加按键和键盘事件侦听器以便

的场景

Shift + L，同时释放Shift + M，不会触发误报

这需要移位然后L然后M按顺序按下......如果你想要L和M的顺序，那么代码会有点不同，但是你应该能够弄清楚

注意：我使用charCode，因为至少firefox，keyCress上的keyCode始终为0

Answer 2

棘手，棘手，但我设法让它运转起来。请注意，浏览器有自己的热键（如chromes [ctrl] + [shift] + i），可能会覆盖该功能。

<!DOCTYPE html>
<html>
<body>
<input id="myInput" onkeydown="keyDownEvent(event)" onkeyup="resetKeys()">
</body>
</html>
<script>
var key1Pressed=false;
var key2Pressed=false;

function resetKeys(){
    key1Pressed=false;
    key2Pressed=false;
}
function keyDownEvent(e){
    e=e||event, chrCode=(typeof e.which=="number")?e.which:e.keyCode;

    if (e.shiftKey && chrCode === 76) key1Pressed=true;
    if (e.shiftKey && chrCode === 77) key2Pressed=true;

    if(key1Pressed && key2Pressed){

        alert('Three Keys Are Pressed');

        key1Pressed=false;
        key2Pressed=false;
    }
}

document.getElementById('myInput').focus();
</script>

Answer 3

如果您试图按两下或三下并在此之后捕获事件，那么我已经写了一个简单的助手：

function KeyPress(_opts) {
  this.opts = Object.assign({}, {
    counts: {},
    timeouts: {},
    timeBetweenPresses: 300
  }, _opts || {});
}

KeyPress.prototype.bubbledReset = function bubbledReset(keyCode) {
  var self = this;
  if (this.opts.timeouts[keyCode]) {
    clearTimeout(this.opts.timeouts[keyCode]);
    this.opts.timeouts[keyCode] = 0;
  }
  this.opts.timeouts[keyCode] = setTimeout(function () {
    self.opts.counts[keyCode] = 0;
  }, this.opts.timeBetweenPresses);
};

KeyPress.prototype.onTap = function onTap(cb) {
  var self = this;
  return function handler(event) {
    self.opts.counts[event.keyCode] = self.opts.counts[event.keyCode] || 0;
    self.opts.counts[event.keyCode]++;
    self.bubbledReset(event.keyCode);
    cb(event.keyCode, self.opts.counts[event.keyCode]);
  };
};

用法只需使用onTap方法实例即可：

var keyPress = new KeyPress();

document.addEventListener('keyup', keyPress.onTap(function (keyCode, count) {
  if (keyCode === 68 && count === 3) {
    // 68 was tapped 3 times (D key)
  }
  if (keyCode === 13 && count === 6) {
    // 13 was tapped 6 times (ENTER key)
  }
}));

希望这对其他人有帮助！

或者，如果您更喜欢es6：

class KeyPress {
  constructor(_opts) {
    this.opts = Object.assign({}, {
      counts: {},
      timeouts: {},
      timeBetweenPresses: 300
    }, _opts || {});
  }

  bubbledReset(keyCode) {
    if (this.timeouts[keyCode]) {
      clearTimeout(this.timeouts[keyCode]);
      this.timeouts[keyCode] = 0;
    }
    this.timeouts[keyCode] = setTimeout(() => {
      this.counts[keyCode] = 0;
    }, this.timeBetweenPresses);
  }

  onTap(cb) {
    return event => {
      this.counts[event.keyCode] = this.counts[event.keyCode] || 0;
      this.counts[event.keyCode]++;
      this.bubbledReset(event.keyCode);
      cb(event.keyCode, this.counts[event.keyCode]);
    };
  }

}

三键keyCode热键javascript

3 个答案: