Develop Reference

How to trigger an event when three keyboards are pressed at the same time in Javascript

I'm writing code to execute a specific function when the ctrl + shift + z key is pressed. When I press two keys at the same time, it works fine, but when I press three keys, the event does not occur. Below is the code I wrote.
try1:
document.onkeydown = function (e) {
if (e.ctrlKey && e.key === 'z') { // It works
undo() // ctrl+ z
}
else if (e.ctrlKey && e.shiftKey && e.key==='z' ) { //It doesn't work
redo(); //ctrl + shift + z
}
}
try2:
document.onkeydown = function (e) { //
var ctrl, shift,z
console.log(e.key)
switch (e.key) {
case 'Control':
ctrl = true;
break;
case 'Shift':
shift = true;
break;
case 'Z':
z = true;
break;
}
if (ctrl&&shift&&z) redo()
}
Neither of these will work if you're typing on three keyboards.
How to make it work when ctrl+shift+z is pressed

Change the order of the conditions, as the first condition is always true if the second is true, causing the code for the second condition to never execute.
document.onkeydown = function(e) {
if (e.ctrlKey && e.shiftKey && e.key === 'Z') {
undo()
} else if (e.ctrlKey && e.key === 'Z') {
redo();
}
}

I nice way to keep track of pressed keys is with an object:
const keys = {}
function onKeyDown(e) {
keys[e.key.toLowerCase()] = true
doSomething()
}
function onKeyUp(e) {
keys[e.key.toLowerCase()] = false
}
window.addEventListener('keydown', onKeyDown)
window.addEventListener('keyup', onKeyUp)
function doSomething() {
console.log(keys)
if (keys.control && keys.shift && keys.z) {
console.log("redo!")
} else if (keys.control && keys.z) {
console.log("undo!")
}
}

Ignore repeated keyboard events when holding down the keys

My code below, which fires update_doc_text() on pressing Ctrl+Shift+Enter, seems to call the function multiple times for some users (it happens when I hold down on those keys as well). What can I do to make sure the function only executes once?
var ctrlDown = false,
ctrlKey = 17,
shiftDown = false,
shiftKey = 16,
KeyEnter = 13,
$(document).keydown(function(e) {
if (e.keyCode == ctrlKey)
ctrlDown = true;
if (e.keyCode == shiftKey)
shiftDown = true;
if (ctrlDown && shiftDown && (e.keyCode == KeyEnter))
update_doc_text();
}).keyup(function(e) {
if (e.keyCode == ctrlKey)
ctrlDown = false;
if (e.keyCode == shiftKey)
shiftDown = false;
});

The problem is due to how you're structured the logic; it's more complicated that it needs to be.
You can achieve what you need by reading the ctrlKey and shiftKey flags from the event to make sure they were held down at the same time as the return key was pressed.
To avoid the repetition when the keys are held down you can use a setTimeout() to set a flag which disables the repeated action for a set amount of time. Try this:
$(document).keydown(function(e) {
var $doc = $(this);
if (e.ctrlKey && e.shiftKey && e.which === 13 && !$doc.data('ctrlShiftReturnDisabled')) {
update_doc_text();
$doc.data('ctrlShiftReturnDisabled', true);
setTimeout(function() {
$doc.data('ctrlShiftReturnDisabled', false);
}, 2000); // 2 seconds, change as needed
}
});
function update_doc_text() {
console.log('update_doc_text');
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

You can use object to store pressed keys and get key code by e.which property. Also you can use one variable pressed to keep track if the keys are pressed and run your code only if that variable is false.
var keys = {}, pressed = false, codes = [13, 16, 17]
var check = keys => codes.every(k => keys[k]);
$(document).keydown(function(e) {
keys[e.which] = true;
if (check(keys) && !pressed) {
// run your code here
console.log('pressed')
pressed = true;
}
}).keyup(function(e) {
keys[e.which] = false;
if (codes.includes(e.which)) {
pressed = false
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

keyDown event overrides paste event

Since I'm using canvas to render typed text and need to use other key events like backspace, forward delete, tab and arrow keys, I need compatibility between browsers and using the keypress and keydown events. When attempting to use the paste event, the keydown event takes priority and cancels the paste event from ever happening.
A related question, but does not solve my issue since I want to keep both the keydown and keypress events
keypress and keydown take priority over paste event in Firefox & Safari
My event listeners:
window.addEventListener('paste', pasteText);
window.addEventListener("keypress", keyPressHandler, true);
window.addEventListener("keydown", keyDownHandler, true);
function pasteText (event) {
console.log('paste');
if(selectedLine !== ''){
var clipboardData, pastedData;
event.stopPropagation();
event.preventDefault();
clipboardData = event.clipboardData || window.clipboardData;
pastedData = clipboardData.getData('Text');
}
}
function keyPressHandler(event){
if(selectedLine != '' &&
$(".sp-input").is(":focus") === false &&
$("input").is(":focus") === false){
var key = event.keyCode;
if (key == 13){ // Enter key
gotoNextLineOrDeselect();
}else if (key == 115 && (event.ctrlKey||event.metaKey)|| (key == 19)) {
// this will be for modifier keys like ctrl, option and command
event.preventDefault();
// do stuff
}else if(key !== 8 &&
key !== 9 &&
key !== 37 &&
key !== 38 &&
key !== 39 &&
key !== 40 &&
key !== 46){
key = event.charCode;
addletter(String.fromCharCode(key));
event.preventDefault();
}
}
}
function keyDownHandler(event){
if(selectedLine != '' &&
$(".sp-input").is(":focus") === false){
var key = event.keyCode;
switch(key){
case 8:
backspace();
break;
case 9: // tab
var nextLine;
if(selectedLine === 'line1' && lineBlankOrWhitespace('line2') === false){
nextLine = 'line2';
}else if(selectedLine === 'line2' && lineBlankOrWhitespace('line3') === false){
nextLine = 'line3';
}else if(selectedLine === 'line2' & lineBlankOrWhitespace('line3') ||
selectedLine === 'line3'){
nextLine = 'line1';
}else return;
selectLine(nextLine, false);
textInsertIndex = textLines[selectedLine].keyHistory.length;
setCaretXPosWithTextInsertIndex(selectedLine, 0);
renderScreen();
event.preventDefault();
break;
case 37: // left arrow
arrowOver(-1);
event.preventDefault();
break;
case 39: // right arrow
arrowOver(1);
event.preventDefault();
break;
case 38: // up arrow
var prevLine = selectedLine === 'line3' ? 'line2' : 'line1';
if(selectedLine !== 'line1'){
selectLine(prevLine, false);
textInsertIndex = textLines[selectedLine].keyHistory.length;
}else{
textInsertIndex = 0;
}
setCaretXPosWithTextInsertIndex(selectedLine, 0);
renderScreen();
event.preventDefault();
break;
case 40: // down arrow
var nextLine = selectedLine === 'line1' ? 'line2' : 'line3';
if(lineBlankOrWhitespace(nextLine) === false &&
selectedLine !== 'line3'){
selectLine(nextLine, false);
}
textInsertIndex = textLines[selectedLine].keyHistory.length;
setCaretXPosWithTextInsertIndex(selectedLine, 0);
renderScreen();
event.preventDefault();
break;
case 46: // forward delete key
forwardDelete();
break;
}
}
}
When pasting, is there a way to prevent the keypress and keydown events from being triggered?

Here's the answer: I need to preventDefault if it exists. Then I need to check for the modifier keys on the other key events and return false if they are pressed.
function pasteText (event) {
if (event.preventDefault())
event.preventDefault();
console.log('paste');
}
function keyPressHandler(event){
if (event.ctrlKey||event.metaKey) {
return false;
}
}
function keyDownHandler(event){
if (event.ctrlKey||event.metaKey) {
return false;
}
}

Event when space is pressing, only one time

I have some issues: I have this : (in a function..)
var space = 0;
setInterval(space, 20);
var keys = {}
$(document).keydown(function(e) {
keys[e.keyCode] = true;
});
$(document).keyup(function(e) {
delete keys[e.keyCode];
});
function space() {
for (var direction in keys) {
if (!keys.hasOwnProperty(direction)) continue;
if (direction == 32) {
space++;
console.log(space);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
32 == Space key, but I saw in the console that space is pressed 3 times (space == 3), keyup keypress and keydown (I think), how can I have just "space = 1" when space is pressed ?

What seems to be happening is that since it's running every 20 ms, as you hold down the space bar the space function is continuously incrementing the count. I added a flag to prevent another execution until the key is released and it works fine. Really you should just use the keypress event and check there if the keyCode === 32 to track your count. Fewer events will be fired. If you want to see what was happening you can comment out the flag and check the console.
var spaceCount = 0;
var running = false;
var keys = {}
$(document).keydown(function(e) {
console.log("keycode", e.keyCode);
keys[e.keyCode] = true;
});
$(document).keyup(function(e) {
console.log("keyup")
delete keys[e.keyCode];
running = false;
});
function space() {
if(running) return;
for (var direction in keys) {
running = true;
console.log(direction);
if (!keys.hasOwnProperty(direction)) continue;
if (direction == 32) {
spaceCount++;
console.log("count: " + spaceCount);
console.log(keys);
}
}
}
setInterval(space, 20);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

I hope that will be helpful:
var space = 0;
var keys = {};
var keys2 = {};
$(document).keydown(function(e) {
keys[e.keyCode] = true;
});
$(document).keyup(function(e) {
keys[e.keyCode] = false;
});
setInterval(function(){spacing()}, 20);
function spacing() {
if (keys[32] && !keys2[32])
{
space++;
keys2[32] = true;
}
else if(!keys[32])
{
keys2[32] = false;
}
console.log(space);
}

capturing Alt+F+P jquery

Here is how I was able to capture CTRL+C in jQuery
$(window).bind('keydown', function (event) {
if (event.ctrlKey || event.metaKey) {
switch (String.fromCharCode(event.which).toLowerCase()) {
case 'p':
event.preventDefault();
printFunc();
break;
}
}
});
How can i do the same for ALT+F+P
$(window).bind('keydown', function (event) {
if (event.altKey || event.metaKey) {
switch (String.fromCharCode(event.which).toLowerCase()) {
case 'f':
event.preventDefault();
//************ Need help for identifying p **************
// alert('Alt-f');
printFunc();
break;
}
}
});
I tried this also but no luck:
if (event.altKey && event.which == 70 && event.which == 80) {
alert('Alt-f-p');
}

This works, but only if you do "p" before "f". In Chrome at least, Alt+F activates a browser function. Live demo (click).
var pressed = {};
$(document).keydown(function(event) {
//event.altKey 70 80
var k = event.keyCode;
if (event.altKey && (k == 70 || k == 80)) {
pressed[k] = true;
console.log(k);
}
if (pressed[70] && pressed[80]) {
console.log('all pressed!');
}
});
$(document).keyup(function() {
pressed = {};
});
Perhaps you would want to adapt it to use something not conflicted?