Skip to content

Instantly share code, notes, and snippets.

@muzsor

muzsor/KeyEventSimulator.js

Forked from GlauberF/KeyEventSimulator.js
Created April 26, 2023 03:13
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save muzsor/a6927bcd1ae9ec018c037b7120283ebe to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save muzsor/a6927bcd1ae9ec018c037b7120283ebe to your computer and use it in GitHub Desktop.
Download ZIP
A function for simulating key event in JavaScript. You just have to choose what key and keyboard event you want to simulate.
Raw
KeyEventSimulator.js
/**
* Simulate a key event.
* @param {Number} keyCode The keyCode of the key to simulate
* @param {String} type (optional) The type of event : down, up or press. The default is down
* @param {Object} modifiers (optional) An object which contains modifiers keys { ctrlKey: true, altKey: false, ...}
*/
function simulateKey (keyCode, type, modifiers) {
var evtName = (typeof(type) === "string") ? "key" + type : "keydown";
var modifier = (typeof(modifiers) === "object") ? modifier : {};
var event = document.createEvent("HTMLEvents");
event.initEvent(evtName, true, false);
event.keyCode = keyCode;
for (var i in modifiers) {
event[i] = modifiers[i];
}
document.dispatchEvent(event);
}
// Setup some tests
var onKeyEvent = function (event) {
var state = "pressed";
if (event.type !== "keypress") {
state = event.type.replace("key", "");
}
console.log("Key with keyCode " + event.keyCode + " is " + state);
};
document.addEventListener("keypress", onKeyEvent, false);
document.addEventListener("keydown", onKeyEvent, false);
document.addEventListener("keyup", onKeyEvent, false);
// Using the function
simulateKey(38);
simulateKey(38, "up");
simulateKey(45, "press");
@muzsor
Copy link
Copy Markdown
Author

muzsor commented May 17, 2023 •
edited
Loading 

function simulateKey(n) {
  document.dispatchEvent(new KeyboardEvent("keydown", { keyCode:n }));
  document.dispatchEvent(new KeyboardEvent("keypress", { keyCode:n }));
  document.dispatchEvent(new KeyboardEvent("keyup", { keyCode:n }));
}
function simulateKey(e){document.dispatchEvent(new KeyboardEvent("keydown",{keyCode:e})),document.dispatchEvent(new KeyboardEvent("keypress",{keyCode:e})),document.dispatchEvent(new KeyboardEvent("keyup",{keyCode:e}))}

@muzsor
Copy link
Copy Markdown
Author

muzsor commented May 17, 2023 •
edited
Loading 

const canvasM = document.querySelector("canvas");

function simulateKey(n) {
  canvasM.dispatchEvent(new KeyboardEvent("keydown", { keyCode:n }));
  canvasM.dispatchEvent(new KeyboardEvent("keypress", { keyCode:n }));
  canvasM.dispatchEvent(new KeyboardEvent("keyup", { keyCode:n }));
}

for ( i = 49; i < 58; i++ ) {
  simulateKey(i);
}
const canvasM=document.querySelector(\"canvas\");function simulateKey(e){canvasM.dispatchEvent(new KeyboardEvent(\"keydown\",{keyCode:e})),canvasM.dispatchEvent(new KeyboardEvent(\"keypress\",{keyCode:e})),canvasM.dispatchEvent(new KeyboardEvent(\"keyup\",{keyCode:e}))}

@muzsor
Copy link
Copy Markdown
Author

muzsor commented May 17, 2023 

document.addEventListener('keydown', function(event) {
  if (!event.isTrusted) {
    console.log('This is a simulated keydown event.');
  } else {
    console.log('This is a real keydown event.');
  }
});

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment