如何跟踪javascript html页面的键？

我想这样做，如果html页面上的用户按下字母a，H，然后a，就会出现一个警告框，说“啊哈，你找到了秘密！”

---

如何使用Jquery、Javascript等实现这一点？

您需要处理“document.onkeypress”事件。

有更有效的方法来实现这一点，但我认为这是向您展示工作中的核心原则的最佳方法。这是使用键关闭事件处理程序和jQuery框架

var step1 = false;
var step2 = false;

$(document).keyup(function(event) {
    if (step2) {
    // Step 2 - Represents we've cleared both A (1) and H
        if (event.keyCode == '65') {
            // We've found the last A!
            step2 = false;
            step1 = false;
            alert("Aha! You've found the secret!");
        } else {
            // It was a key other than A :( Reset to start
            step2 = false;
        }
    } else if (!step1) {
        // Step 1 - Represents we haven't started our chain yet
        if (event.keyCode == '65') {
            // Someone pressed A! Step 1 is DONE!
            step1 = true;
        }
    } else {
        // Step 1 is done, but we're waiting on Step 2... Will it be?
        if (event.keyCode == '72') {
            // H has been pressed! We're cleared through Step 2
            step2 = true;
            step1 = false;
        } else {
            // H wasn't press :(, Let's go back to the start
            step1 = false;
        }
    }
});

附录：值得注意的是，整数65表示字母

a

的键盘按键，72表示字母

h

var sequence = "DDE";
var i = 0;

document.onkeyup = function(e){
    e = e || window.event;
    var keycode = e.keyCode || e.charCode;
    if(keycode == sequence.charCodeAt(i)){
        if(i == sequence.length -1 ){
            alert("You've found the secret");
            i = 0;
        } else {
            i++;
        }
    } else {
        i = 0;
    }
};

---

以下是使用正确事件的答案，即

按键

keydown

和

keydup

用于检测物理键（不同键盘类型会有所不同），而

keypress

用于检测键入的字符，而不管键盘布局如何。下面的匹配不区分大小写，但您可以将其简单地更改为区分大小写

var secret = "aha", correctCharCount = 0;

document.onkeypress = function(e) {
    e = e || window.event;
    var charCode = (typeof e.which == "number") ? e.which : e.keyCode;
    var lowerChar = String.fromCharCode(charCode).toLowerCase();
    if (lowerChar == secret.charAt(correctCharCount)) {
        correctCharCount++;
        if (correctCharCount == secret.length) {
            alert("Aha, you've found the secret!");
            correctCharCount = 0;
        }
    } else {
        // Check whether the character typed is the first character
        // in the secret
        correctCharCount = (lowerChar == secret.charAt(0)) ? 1 : 0;
    }
};

---

试试看！如果你的尝试没有成功，你将有足够的代码和解释来回答一个好问题。问题是我知道如何处理一个按键事件，但困难是跟踪多个按键的顺序，而我不知道如何处理。注：顺序必须是“A”，然后是“B”，然后是“A”。如果用户在“R”中间输入了任何其他键，则不会触发警报。这会跟踪一个键，但我需要跟踪多个键的顺序。这是一些难以理解的代码。有很多更直接的方法可以做到这一点。@T谢尔曼先生我不同意，我发现if-else语句很容易追溯。此外，您提供的代码不能帮助OP完成其任务。你只是在演示一个按键事件。是的，我知道。我在我的回答中说过。我想你会发现这更具可读性。短六行，需要一个全局而不是两个全局，可扩展到三个字母以上的单词，对我来说，比一堆嵌套的if语句可读性好得多。按照您自己的逻辑，如果有人是一个编程新手，他们几乎无法跟踪if-else语句，那么我认为switch语句的引入只会进一步混淆。正如我在回答开始时明确指出的那样，还有其他更有效的方法可以做到这一点。就个人而言，我会使用与您提供的方法类似的方法；但我在这里的游戏是指导性的。谢天谢地，OP有许多不同的学习方法，如果你不那么咄咄逼人地反对别人的意见，我将不胜感激。啊哈，我的答案几乎完全一样

var secret = "aha", correctCharCount = 0;

document.onkeypress = function(e) {
    e = e || window.event;
    var charCode = (typeof e.which == "number") ? e.which : e.keyCode;
    var lowerChar = String.fromCharCode(charCode).toLowerCase();
    if (lowerChar == secret.charAt(correctCharCount)) {
        correctCharCount++;
        if (correctCharCount == secret.length) {
            alert("Aha, you've found the secret!");
            correctCharCount = 0;
        }
    } else {
        // Check whether the character typed is the first character
        // in the secret
        correctCharCount = (lowerChar == secret.charAt(0)) ? 1 : 0;
    }
};