Question

document.onkeyup = function(event){

    var key_press = String.fromCharCode(event.keyCode);
    var status = document.getElementById('status');
    status.innerHTML = "UP Event Fired For : "+key_press;
    if (key_press == "38") {
        &&
    } if (key_press == "39") {
        &&
    } else if (key_press == "40") {
        &&
    } else if (key_press == "37") {
        alert ("First born beauty");
    }
});
}

您好，我尝试在按正确顺序（左>上＆gt;右＆下;向下）按箭头键时，将此代码转换为操作事件/弹出窗口的目的，这是侦听的正文。：）

http://jsfiddle.net/50hup6y1/7/

Answer 1

我不介意看到其他回复，但这是天真的，我想出的：

var keyQueue = [];

function checkQueue() {
    // just remove old keys until we only have 4
    // this is to keep the queue from growing too big
    // note the '4' should be the longest combination of
    // keys you plan to use
    while(keyQueue.length > 4) {
        keyQueue.shift();
    }

    if (keyQueue[0] === 37
        && keyQueue[1] === 38
        && keyQueue[2] === 39
        && keyQueue[3] === 40) {
        alert("Hey the keys were pressed in the right order!")
    }
}

document.onkeyup = function(event) {
    keyQueue.push(event.keyCode);
    checkQueue();
};

一般来说，onkeyup将按键存储在队列中。然后检查最后4次按下是否都是正确的按键，并且顺序正确。如果是这样，就会发生一些事情。

Answer 2

我对这个问题的看法是：

// taken from: http://stackoverflow.com/a/14853974/82548
// attach the .equals method to Array's prototype to call it on any array
Array.prototype.equals = function (array) {
    // if the other array is a falsy value, return
    if (!array)
        return false;

    // compare lengths - can save a lot of time 
    if (this.length != array.length)
        return false;

    for (var i = 0, l=this.length; i < l; i++) {
        // Check if we have nested arrays
        if (this[i] instanceof Array && array[i] instanceof Array) {
            // recurse into the nested arrays
            if (!this[i].equals(array[i]))
                return false;       
        }           
        else if (this[i] != array[i]) { 
            // Warning - two different object instances will never be equal: {x:20} != {x:20}
            return false;   
        }           
    }       
    return true;
}   


// the keys to be pressed, in the order to be pressed:    
var keyOrder = [37,38,39,40],
// the log of keys the user presses:
    keyPresses = [];

function keySequenceCheck (e) {
    // adding the last-pressed key to the array:
    keyPresses.push(e.keyCode);

    // if the keyPresses array is long the key order we're checking for, we
    // we trim off the front of the array:
    if (keyPresses.length > keyOrder.length) {
        keyPresses.shift();
    }

    // checking that the keyPresses array has the same values
    // in the same order as the keyOrder array:
    if (keyPresses.equals(keyOrder)) {
        // if so display the message:
        console.log('Message');
    }
}

// bind the event handler to the <body> element:
document.body.addEventListener('keyup', keySequenceCheck);

// taken from: http://stackoverflow.com/a/14853974/82548
// attach the .equals method to Array's prototype to call it on any array
Array.prototype.equals = function(array) {
  // if the other array is a falsy value, return
  if (!array)
    return false;

  // compare lengths - can save a lot of time 
  if (this.length != array.length)
    return false;

  for (var i = 0, l = this.length; i < l; i++) {
    // Check if we have nested arrays
    if (this[i] instanceof Array && array[i] instanceof Array) {
      // recurse into the nested arrays
      if (!this[i].equals(array[i]))
        return false;
    } else if (this[i] != array[i]) {
      // Warning - two different object instances will never be equal: {x:20} != {x:20}
      return false;
    }
  }
  return true;
}


var keyOrder = [37, 38, 39, 40],
  keyPresses = [];

function keySequenceCheck(e) {
  keyPresses.push(e.keyCode);
  if (keyPresses.length > keyOrder.length) {
    keyPresses.shift();
  }

  if (keyPresses.equals(keyOrder)) {
    console.log('Message');
  }
}

document.body.addEventListener('keyup', keySequenceCheck);

body {
  height: 100%;
  background-color: #ffa;
}

JS Fiddle demo

参考文献：

Javascript onKeyup活动＆amp;＆amp;操作者

2 个答案: