我如何跟踪按键并将它们记录到 Javascript 中的控制台 [重复]答案

【问题标题】：how do i track key presses and log them to the console in Javascript [duplicate]我如何跟踪按键并将它们记录到 Javascript 中的控制台 [重复]
【发布时间】：2021-11-03 13:22:11
【问题描述】：

最近，我开始制作一个非常简单的程序，我基本上是一堆用于不同 JavaScript 标记的热键。但我不知道如何跟踪按键并将它们记录到控制台中。

【问题讨论】：

您可以将事件监听器添加到 DOM 中，用于监听 keypress、keyup 和 keydown。
请在提问前做一些简单的研究。

标签： javascript function

【解决方案1】：

在 HTML 中

<input type="text" id="username" onkeyup="myFunc()">

在 Javascript 中

function myFunc(){
    console.log(document.getElementByID('username).value)
}

【讨论】：

【解决方案2】：

在整个窗口中（要查看代码 sn-p 工作，单击运行代码 sn-p 然后单击下面的空白区域并键入一些键:)）

// list of modifiers : https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/getModifierState
var modifiers = ["CapsLock", "Control", "Alt", "Shift", "AltGraph"];
var upOrDown = function(event) {
    var element = document.getElementById("status");
    var key = event.key || event.which || event.keyCode; //find the key that was pressed
    var status = "Pressed :";
    for (const modifier of modifiers) {
        if (event.getModifierState(modifier))
        {
            status += " "+modifier;
        }
    }
    if ("keydown"==event.type && !modifiers.includes(key))
    {

        status += " "+key;
    }
    element.innerHTML = status;
    //console.log(status);
}
window.addEventListener("keydown",upOrDown,false);
window.addEventListener("keyup",upOrDown,false);

&lt;div id="status"&gt;Pressed : &lt;/div&gt;

【讨论】：