Using kepresses and if statements to enable and disable elements - javascript

I am using electron to build an app that has a fullscreen feature (of course). I am trying to use the F11 key (keyCode = "85") to enable a message on my Html page that tells the user to press F11 to exit fullscreen. I am using var i = 0 to set the status of the fullscreen app, where i = 0; is not fullscreen and where i = 1; is fullscreen. This feature is partially working except for when I try to disable it by pressing F11. When pressed, the element does not set its display to none.
What am I doing wrong? Thanks!
window.addEventListener("keydown", checkKeyPressed, false);
function checkKeyPressed(e) {
var i = 0;
if (i == "0") {
if (e.keyCode = "85") {
document.getElementById('exitfullscreenmessage').style.display = "block";
i = 1;
}
} else if (i == "1") {
if (e.keyCode = "85") {
document.getElementById('exitfullscreenmessage').style.display = "none";
i = 0;
}
}
}

You're re-initializing i to 0 every time you enter the function. You need to move the variable out of the function.
You should also use boolean values to implement alternating values, not 1/0. And don't put quotes around numbers.
You also had a typo, you were using = instead of == when testing e.keyCode.
window.addEventListener("keydown", checkKeyPressed, false);
var fullscreenmessage = false;
function checkKeyPressed(e) {
//the correct keycode for F11 is 122
if (e.keyCode == 122) {
document.getElementById('exitfullscreenmessage').style.display = fullscreenmessage ? "none" : "block";
fullscreenmessage = !fullscreenmessage;
}
}
#exitfullscreenmessage {
display: none;
}
<div id="exitfullscreenmessage">Exit full screen</div>

Related

Return a key-press whilst another key is held down

So what I need is to be able to hold down the spacebar key and the script needs to repeatedly spam the spacebar key as if I was doing it by tapping.
I have some code already written but I can't get it to work like I want.
document.addEventListener("keydown", function(event) {
if (event.keyCode == 32) {
var i = 0;
setInterval(() => {
var e = document.createEvent('HTMLEvents');
e.keyCode = 32;
e.initEvent(++i % 2 > 0 ? 'keyup' : 'keydown', false, true);
window.dispatchEvent(e);
}, 35);
}
});
So basically this works, when I press the spacebar it repeatedly presses the spacebar up and down, however it doesn't stop doing it when I release the space bar, however it doesn't actually start until I press the spacebar which means it's somewhat working.
I know the problem is with this line e.initEvent(++i % 2 > 0 ? 'keyup' : 'keydown', false, true);
but I've actually recovered this code from another project and can't figure out what it's doing or how.
Does anyone have any suggestions?
Not sure if this is what you need. Have a look. Event has a repeat property.
let test = 1;
let temp = document.querySelector('.test');
temp.innerHTML = test;
document.addEventListener("keydown", function(event) {
if (event.keyCode == 32) {
console.log(event.repeat);
test += 1;
temp.innerHTML = test;
}
});
<div class = 'test'>
<div>

I'm trying to control a NexusUI matrix button with the space bar. It will turn on when I press it once but not sure how to make it turn off again

I'm using a Javascript function to control whether a sequencer is on or off in NexusUI with the spacebar (key 32). It will turn on when I press it once but how do I make it turn off when I press it again, similar to when using a spacebar to control the state of a YouTube video. I'm not able to use Jquery for this.
window.addEventListener("keydown", keyboardActions);
function keyboardActions(key) {
if (key.keyCode == 32) {
sequencer.sequence(dial1.val.value);
console.log(key);
}
else {
sequencer.stop();
}
}
<canvas nx="matrix" id="sequencer"></canvas>
You need to store the running state of the sequencer in a variable and then query that state. Something like this:
window.addEventListener("keydown", keyboardActions);
var running = false;
function keyboardActions(key) {
if (key.keyCode == 32) {
if (!running) {
sequencer.sequence(dial1.val.value);
running = true;
} else {
sequencer.stop();
running = false;
}
}
}

Jquery capture tab + some key combination

How can I catch, for example, tab+t combination with jQuery? I've found a lot of examples with alt, shift and ctrl, since event object contains special flags in order to understand if, for example, alt was pressed. But there is not such thing for tab.
This should work. It's a bit convoluted and there is likely an easier way, but it works fine.
JSFiddle: https://jsfiddle.net/spybhhxc/
var tabdown = false;
var tdown = false;
$(document).keydown(function(e) {
if(e.which == 9) {
tabdown = true;
}
if(e.which === 84)
{
tdown = true;
}
if(tabdown && tdown)
{
//do your thing
}
});
$(document).keyup(function(e) {
if(e.which == 9) {
tabdown = false;
}
if(e.which === 84)
{
tdown = false;
}
});
This presents a problem though, as once you press tab, the document is unfocused as the tab key navigates to elements in a browser. You would be much better off using something like alt or ctrl which don't interact with the browser.
We can have a tab key pressed [tabPressed] variable which will be set to true on key down and unset the same on its key up event. We will using the tab key pressed[tabPressed] variable to check whether it is in pressed state during the other key press activities. The tab keycode is 9.
jsfiddle link http://jsfiddle.net/e3Lveyj2/
var tabPressed=false;
function handleKeyDown(e) {
var evt = (e==null ? event:e);
if(evt.keyCode == 9){
tabPressed=true;
}
if ((tabPressed) && (evt.keyCode == 84)) {
alert ("You pressed 'Tab+t'")
}
}
function handleKeyUp(e) {
var evt = (e==null ? event:e);
if(evt.keyCode == 9){
tabPressed=false;
}
}
document.onkeydown = handleKeyDown;
document.onkeyup = handleKeyUp;

Making a key pressed only register once rather than continually

I am developing a game where you must press the left and right arrow keys alternatively to make the character move, the faster you do it, the quicker he runs. I have however ran into a problem whereby the key is being "held down" in a sense so no matter how quick you press the key it still manages to execute it multiple times.
So I am looking for a way to make the key only be pressed once per press rather than updating if you hold down the key.
here is the code for my key capturing and what it executes at the moment (Which is just an update of points and an update of the image used for the character.
KEY_CODES = {
37: 'left',
39: 'right',
40: 'down',
}
KEY_STATUS = {};
for (code in KEY_CODES) {
KEY_STATUS[KEY_CODES[code]] = false;
}
document.onkeydown = function (e) {
var keyCode = (e.keyCode) ? e.keyCode : e.charCode;
if (KEY_CODES[keyCode]) {
e.preventDefault();
KEY_STATUS[KEY_CODES[keyCode]] = true;
}
}
document.onkeyup = function (e) {
var keyCode = (e.keyCode) ? e.keyCode : e.charCode;
if (KEY_CODES[keyCode]) {
e.preventDefault();
KEY_STATUS[KEY_CODES[keyCode]] = false;
}
}
function move() {
movecounter++;
// Determine if the action is move action
if (KEY_STATUS.left || KEY_STATUS.right ||
KEY_STATUS.down || KEY_STATUS.up) {
// Redraw the canavs background images ready for the new ones to be placed ontop.
paintCanvas();
// to have diagonal movement.
if (KEY_STATUS.left) {
ctx.drawImage(imageStore.snowWalk, playerPosW, playerPosH);
snowStand = true;
score += 10;
} else if (KEY_STATUS.right) {
ctx.drawImage(imageStore.snowWalk, playerPosW, playerPosH);
score += 10;
} else if (KEY_STATUS.down) {
ctx.drawImage(imageStore.snowCrouch, playerPosW, playerPosH);
snowStand = false;
}
}
};
Hope you understand the problem I am facing, I have tried to explain it as best as I can here.
Thanks!
A simple solution would be to have a variable outside of the scope of the event listener that tells you if you're pressing the key for the first time:
var pressed = false;
Then, in the listener, toggle the state of that variable when the key is pressed:
.keydown(function() {
if (pressed) return;
pressed = true;
}
.keyup(function() {
pressed = false;
}

Stuck alt / modifier key with Javascript

I have a library that creates an editor on the fly (http://epiceditor.com) and also sets up key shortcuts automatically. The shortcuts can be configured in the options so I can't use e.altKey, e.ctrlKey, etc just a heads up.
For some reason the modifier key isn't being set back to false sometimes on Mac/Ubuntu browsers.
On Windows it seems to happen every time. You can reproduce this by clicking render in JSBin then pressing alt+p. You should see "Yay" appear. Now, if on Windows press just p again. You'll see "Yay appear again. Mac and Ubuntu users have seen this same issue occasionally but it's hard to reproduce it.
Also note this only happens with the alt key it seems. Below I have 16 (shift) next to the 18 (alt). If you swap those out it'll work as expected.
The code for the stripped down test case is:
var modKey = false;
var modKeyCode = 18; //16
document.body.addEventListener('keydown', function (e) {
if (!modKey && modKeyCode == e.keyCode) {
modKey = true;
}
if (modKey && e.keyCode == 80) {
console.log('Yay!');
}
});
document.body.addEventListener('keyup', function (e) {
if (modKey && modKeyCode == e.keyCode) {
modKey = false;
}
});
Demo: http://jsbin.com/uhupah/3/edit#javascript,html
I do not have access to my Linux box at the moment, so i cannot test your code.
Thus here is more of a suggestion:
Linux (in my experience) is finicky when it it comes to keyCodes and order of key events. Perhaps combine the if(..) from keyup with that of keydown
if (!modKey && modKeyCode == e.keyCode) {
modKey = true;
} else if (modKey && modKeyCode == e.keyCode) {
modKey = false;
}
The above suggestion is made with assumption that you have no specific requirement to have both 'keydown' and 'keyup'.
I've come up with a fix, albeit a sort of crappy fix, but a fix nonetheless.
The fix I went with was to reset the modifier var when any key combo was successful. I.e. one the p in alt+p is pressed reset the modKey to false like this:
var modKey = false;
var modKeyCode = 18; //16
document.body.addEventListener('keydown', function (e) {
if (!modKey && modKeyCode == e.keyCode) {
modKey = true;
}
if (modKey && e.keyCode == 80) {
console.log('Yay!');
modKey = false; //THIS
}
});
document.body.addEventListener('keyup', function (e) {
if (modKey && modKeyCode == e.keyCode) {
modKey = false;
}
});
The problem with this tho is that you can't do back to back key commands. Most of the time this is alright because the user will do a key command like "save" or "preview" or something, type some more, then do another key command. But you wouldn't be able to, let's say: alt+p s to trigger alt+p then alt+s without having to let go of the alt key.

Categories