We Keep Coding

Javascript - Creating an event listener for an exported class

I'm trying to create a class that supplies an event listener and handler for a html canvas object to respond to when left and right arrow keys are pressed. my project has 2 files a game's classes file and the game's main file
these are the functions that would normally go into the games main file. but I'm trying to make them into a class that can be exported.
// unmodified code
function keyDownHandler(e) {
if (e.keyCode == 39) {
rightPressed = true;
}
else if (e.keyCode == 37) {
leftPressed = true;
}
}
function keyUpHandler(e) {
if (e.keyCode == 39) {
rightPressed = false;
}
else if (e.keyCode == 37) {
leftPressed = false;
}
}
document.addEventListener("keydown", keyDownHandler, false);
document.addEventListener("keyup", keyUpHandler, false);
// actual answer is below
export class Paddle {
constructor (world) {
this.canvas = world.canvas,
this.ctx = world.ctx,
this.paddleHeight = 10;
this.paddleWidth = 75;
this.paddleX = (this.canvas.width - this.paddleWidth) / 2;
this.rightPressed = false;
this.leftPressed = false;
// do i have to make a attribute for the event handlers?
// or do i just add the listeners here?
}
draw() {
this.ctx.beginPath();
this.ctx.rect(this.paddleX, this.canvas.height - this.paddleHeight, this.paddleWidth, this.paddleHeight);
this.ctx.fillStyle = "#0095DD";
this.ctx.fill();
this.ctx.closePath();
}
keyDownHandler(e) {
if (e.keyCode == 39) {
rightPressed = true;
}
else if (e.keyCode == 37) {
leftPressed = true;
}
}
keyUpHandler(e) {
if (e.keyCode == 39) {
rightPressed = false;
}
else if (e.keyCode == 37) {
leftPressed = false;
}
}
listener() {
document.addEventListener("keydown", this.keyDownHandler, false);
document.addEventListener("keyup", this.keyUpHandler, false);
}
}

Create object that contains properties keyDownHandler and keyUpHandler as a functions and keyDown and KeyUp as a constants in the module
// Module my-module.js
var foo={
rightPressed:false;
leftPressed:false;
keyDownHandler:function(e) {
if (e.keyCode == 39) {
this.rightPressed = true;
}
else if (e.keyCode == 37) {
this.leftPressed = true;
}
}
keyUpHandler:function(e){
if (e.keyCode == 39) {
this.rightPressed = false;
}
else if (e.keyCode == 37) {
this.leftPressed = false;
}
const keyDown= document.addEventListener("keydown", this.keyDownHandler, false);
const keyUp= document.addEventListener("keyup", this.keyUpHandler, false);
}
export {foo};
Import the Module
import{foo} from 'my-module';
Use the constants
foo.keyUp;
foo.keyDown;

You're really quite close - but in your keyHandler functions, you have this:
if (e.keyCode == 39) {
rightPressed = true;
}
There is no global variable rightPressed - it exists only in the class Paddle. Change your key handlers to this:
keyDownHandler(e) {
if (e.keyCode == 39) {
this.rightPressed = true; //Changed here
}
else if (e.keyCode == 37) {
this.leftPressed = true; //Changed here
}
}
keyUpHandler(e) {
if (e.keyCode == 39) {
this.rightPressed = false; //Changed here
}
else if (e.keyCode == 37) {
this.leftPressed = false; //Changed here
}
}
Now all you need to do is change the listener() function in Paddle like this:
listener() {
document.body.addEventListener("keydown", this.keyDownHandler(e), false);
document.body.addEventListener("keyup", this.keyUpHandler(e), false);
And create the instance of your class like this:
var player = new Paddle(world);
And you need to put all the functions into the constructor for it to work.

Reliable arrow key input in javascript

I need to detect arrow key input in javascript. Currently I am doing this:
document.onkeydown = function(event) {
if (event.which == 37) {
...
} else if (event.which == 39) {
...
} else if (event.which == 38) {
...
} else if (event.which == 40) {
...
}
};
document.onkeyup = function(event) {
if (event.which == 37) {
...
} else if (event.which == 39) {
...
} else if (event.which == 38) {
...
} else if (event.which == 40) {
...
}
};
This works fine, but when i press command + right and release the arrow key first, I get the down event for the arrow key, but only get an up event when releasing the command key. Also the keycode is 91 regardless of which arrow key I was pressing. How do I handle this situation?
I am on a mac with google chrome.

Do something only if no inputs are in focus

Was wondering if you could help me. I have several inputs on a page with multiple tabs.I would like left + right arrows to change tab but ONLY if no inputs on the page are in focus
document.onkeydown = checkKey;
function checkKey(e) {
e = e || window.event;
if (NO_INPUTS_IN_FOCUS) {
if (e.keyCode == '37') {
// left arrow
}
else if (e.keyCode == '39') {
// right arrow
}
}
}
Any help appreciated, Thanks.

For your case :
if (!($("input").is(":focus"))) {
NO_INPUTS_IN_FOCUS = true;
}
else {
NO_INPUTS_IN_FOCUS = false;
}

Try
document.onkeydown = checkKey;
function checkKey(e) {
e = e || window.event;
var target = e.target || e.srcElement,
tag = target.tagName.toLowerCase();
if (tag != "input" && tag.indexOf("select") ==-1 && tag != "textarea") {
if (e.keyCode == '37') {
// left arrow
}
else if (e.keyCode == '39') {
// right arrow
}
}
}

Add arrow key navigation to site with variable in page

I would like to add this code to allow navigation through a website with left and right arrows. Is there any way to assign the window.location variable from an image that is linked on that page? I'm trying to make the left and right arrows on the page that are used for navigation on the page to be assigned to the left and right arrows on the keyboard.
img src="leftarrow.png" = previous page
img src="rightarrow.png" = next page
Code to be used: (other code is fine too)
var browser = navigator.appName;
if (browser == "Microsoft Internet Explorer") {
document.onkeydown=keydownie;
} else {
document.onkeydown=keydown;
}
function keydownie(e) {
if (!e) var e = window.event;
if (e.keyCode) {
keycode = e.keyCode;
if ((keycode == 39) || (keycode == 37)) {
window.event.keyCode = 0;
}
} else {
keycode = e.which;
}
if (keycode == 37) {
window.location = '!!PREVIOUS_URLHERE!!';
return false;
} else if (keycode == 39){
window.location = '!!NEXT_URLHERE!!';
return false;
}
}
function keydown(e) {
if (e.which) {
keycode = e.which;
} else {
keycode = e.keyCode;
}
if (keycode == 37) {
window.location = '!!PREVIOUS_URLHERE!!';
return false;
} else if (keycode == 39) {
window.location = '!!NEXT_URLHERE!!';
return false;
}
}

Assuming the image is wrapped in an anchor tag (otherwise how would it work?), you could do something like this:
if (keycode == 37) {
img = document.querySelector("img[src='leftarrow.png']");
window.location = img.parentElement.href;
return false;
} else if (keycode == 39) {
img = document.querySelector("img[src='rightarrow.png']");
window.location = img.parentElement.href;
return false;
}
We're looking for the appropriate image/navigation link and getting the url from it's anchor container.

Web page change when left or right arrow in keyboard pushed

i want to ask how can i change the web page when the arrow key pushed by user , like a web of manga/book if we want to next page we just push the arrow key
sorry for my english , thanks before

You can use jQuery for that:
$(document).keydown(function(e) {
if (e.which == 37) {
alert("left");
e.preventDefault();
return false;
}
if (e.which == 39) {
alert("right");
e.preventDefault();
return false;
}
});

If you wish to use the jQuery framework, then look at Binding arrow keys in JS/jQuery
In plain javascript, I'll go with :
document.onkeydown = function (e) {
e = e || window.event;
var charCode = (e.charCode) ? e.charCode : e.keyCode;
if (charCode == 37) {
alert('left');
}
else if (charCode == 39) {
alert('right');
}
};

Here is a non jQuery option:
document.onkeydown = arrowChecker;
function arrowChecker(e) {
e = e || window.event;
if (e.keyCode == '37') { //left
document.location.href = "http://stackoverflow.com/";
}
else if (e.keyCode == '39') { //right
document.location.href = "http://google.com/";
}
}