lately, I've started making a very simple program that I what to basically be a bunch of hotkeys for different JavaScript tags. But I don't know how to track the key presses and log them into the console.
In HTML
<input type="text" id="username" onkeyup="myFunc()">
In Javascript
function myFunc(){
console.log(document.getElementByID('username).value)
}
in the whole window (to see the code snippet work, click Run code snippet then click in the blank area below and type some keys :) )
// 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);<div id="status">Pressed : </div>