Wie verfolge ich eine Reihe von Tastendrücken in JavaScript?

Question

Ich bin extrem neu in JavaScript und weiß nicht, wo ich falsch liege. Ich möchte eine Funktion erstellen, die nach einer korrekten Reihe von keyEvents ausgeführt wird. Wenn ein Benutzer die Tasten "j", "a", "c", "o" und "b" in dieser Reihenfolge (und nur in dieser Reihenfolge) drückt, wird im Wesentlichen ein Element auf meiner Webseite sichtbar. Dieses Element wird derzeit mithilfe eines CSS-Style-Tags ausgeblendet: <div id="hideaway" style="display:none;">

<script> 

 function keyListener(event) {
	event = event || window.event; //capture the event, and ensure we have an event
    var key = event.key || event.which || event.keyCode; //find the key that was pressed
    if(key==106) { //this is for 'j'
	    document.getElementById("hideaway").style.display="block";
        event = event || window.event; //capture the event, and ensure we have an event
        var key = event.key || event.which || event.keyCode; //find the key that was pressed
		if(key==97) { //this is for 'a'
        	event = event || window.event; //capture the event, and ensure we have an event
        	var key = event.key || event.which || event.keyCode; //find the key that was pressed
			if(key==99) { //this is for 'c'
        		event = event || window.event; //capture the event, and ensure we have an event
        		var key = event.key || event.which || event.keyCode; //find the key that was pressed
				if(key==111) { //this is for 'o'
        			event = event || window.event; //capture the event, and ensure we have an event
        			var key = event.key || event.which || event.keyCode; //find the key that was pressed
					if(key==98) { //this is for 'b'
        				event = event || window.event; //capture the event, and ensure we have an event
        				var key = event.key || event.which || event.keyCode; //find the key that was pressed
        			    document.getElementById('hideaway').style.display='block';
    					
    				}
    			}
    		}
        }
    }  
}
  
document.getElementById("hideaway").addEventListener("keydown", keyListener);
</script>

Alle Kommentare sind willkommen.

javascript

0

Jacob 26 Aug. 2015 im 23:40

Answer 1

Ich habe ein Konami-Code-Osterei wie folgt implementiert:

var code = "";
window.addEventListener("keydown",function(e) {
    code = (code+String.fromCharCode(e.keyCode || e.which)).substr(-11);
    if( code == "&&((%'%'BA ") {
        window.removeEventListener("keydown",arguments.callee);
        // do stuff here
    }
},false);

Die wichtigen Dinge hier sind:

.substr(-11) schneidet die Eingabesequenz auf 11 Zeichen ab - in Ihrem Fall möchten Sie -5, die Länge von "jacob"
Buchstaben sind in Großbuchstaben. Sie sollten nach JACOB suchen
Oben verwendet das code die entsprechenden Zeichen für die Schlüsselcodewerte für die Pfeiltasten. In Ihrem Fall brauchen Sie nur die Buchstaben, machen Sie sich also keine Sorgen.

7

Niet the Dark Absol 27 Aug. 2015 im 14:36

Answer 2

Eine Möglichkeit, es zu tun:

http://codepen.io/christianpugliese/pen/GpKJXN

var PASSCODE = ['j','a','c','o','b'],
    current = 0,
    logger = document.getElementById('logger');

function keyListener(e) {
    var code = e.keyCode || e.which,
      str = String.fromCharCode(code);

    if(str === PASSCODE[current]){
        current++;
        logger.innerHTML += str;
        console.log(current, PASSCODE.length);
        if(current >= PASSCODE.length){
          console.log('voi la');
        }
  } else {
      current = 0;
      logger.innerHTML = '';
  }

}

document.addEventListener("keypress", keyListener);

1

Chris 26 Aug. 2015 im 21:10

Wie verfolge ich eine Reihe von Tastendrücken in JavaScript?

2 Antworten

Verwandte Fragen

Neue Fragen