Develop Reference

Javascript event is not triggering

I am trying to do the trigger keyDown event on click of a button, but this is not working.
$("#button").click(function() {
var e = jQuery.Event("keydown");
e.keyCode = 37;
$(this).trigger(e);
return false;
});
But the event is not triggering. Can anyone suggest please?

It looks to me like it's working.
Try the snippet below with the test function:
$(document).ready(function() {
$("#button").click(function() {
var e = jQuery.Event("keydown");
e.keyCode = 37;
$(this).trigger(e);
console.log(e);
return false;
});
});
// test trigger
$(window).keydown(function(e) {
key = e.keyCode ? e.keyCode : e.which;
if (key === 37) {
alert(`Left arrow triggered, (keyCode ${key})`);
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="button">Trigger key 37 (left arrow)</button>

Javascript several keyboard events

I'm currently building a music player with three buttons (actually simple divs) for Play/Pause (id="play"), Previous (id=rew) and Next (id="fwd").
I want the Play/Pause to be "clicked" when pressing SPACEBAR.
I want the Previous to be "clicked" when pressing LEFT ARROW.
I want the Next to be "clicked" when pressing RIGHT ARROW.
I've successfully managed the SPACEBAR control of Play with this :
var play = document.getElementById("play");
document.onkeydown = function (e) {
if (e.keyCode == 32) {
play.click();
}
};
However, when I add the same for the two other buttons in my script, the SPACEBAR control of Play does not work anymore, as well as the other two.
So, what I have currently in my script and which is obviously not working is this :
<script>
var play = document.getElementById("play");
document.onkeydown = function (e) {
if (e.keyCode == 32) {
play.click();
}
};
var rew = document.getElementById("rew");
document.onkeydown = function (e) {
if (e.keyCode == 37) {
rew.click();
}
};
var fwd = document.getElementById("fwd");
document.onkeydown = function (e) {
if (e.keyCode == 39) {
fwd.click();
}
};
</script>
What am I doing wrong ?

Each of your keydown events is overwriting the previous one.
Instead, put all the logic into one keydown event, like this:
var play = document.getElementById("play");
var rew = document.getElementById("rew");
var fwd = document.getElementById("fwd");
document.onkeydown = function(e) {
if (e.keyCode == 32) {
play.click();
} else if (e.keyCode == 37) {
rew.click();
} else if (e.keyCode == 39) {
fwd.click();
}
};

When you assign to onkeydown several times only the last one will be assigned because it will override the previous one. You can use addEventListener instead but that isn't the best approach neither. Just make more test inside one event listener like this:
var play = document.getElementById("play");
var rew = document.getElementById("rew");
var fwd = document.getElementById("fwd");
document.onkeydown = function (e) {
if (e.keyCode == 32) {
play.click();
}
else if(e.keyCode == 32) {
rev.click();
}
else if(e.keyCode == 32) {
fwd.click();
}
};

how to simulate keypress for unit testing in jasmine

I need to unit test function that is triggered when key pressed.
public onKeyDown(event: KeyboardEvent): void {
if (event.ctrlKey && event.keyCode === 38) {
console.log('increase');
}
if (event.ctrlKey && event.keyCode === 40) {
console.log('decrease');
}
/* Prevent entering characters */
if (event.keyCode >= 65 && event.keyCode <= 90) {
return;
}
}
How can I simulate keypress to satisfy the fist condition, for example?

The example code below shows how an event is created, triggered, and intercepted.
var keyPressed = null;
function keyPress(key) {
var event = document.createEvent('Event');
event.keyCode = key;
event.initEvent('keydown');
document.dispatchEvent(event);
}
document.addEventListener('keydown', function(e){
keyPressed = e.keyCode;
});
keyPress(37)
alert(keyPressed);

Trying to detect the Enter key in JS

So I have a game, and Im trying to keep it from starting unless the user pressed the Enter key.
This is the code I have for that:
var code = (e.keyCode ? e.keyCode : e.which);
var enterpressed = 0;
do {
if(code == 13) { //Enter keycode
enterpressed = 13;
}
ctx.font = "25px Helvetica";
drawStartScreen();
update();
} while (enterpressed === 13);
This is the full program, on JSfiddle:
http://jsfiddle.net/3aoozxte/6/
Edit: I figured it out!
Here is the program working:
http://jsfiddle.net/84c2k5kg/6/

Here is the solution to your problem.
I added the enter key logic to your keydown eventlistener. So when you press enter it starts the game.
I deleted the loop in startGameScreen() to prevent the browser crashing repeating this infinite loop.
http://jsfiddle.net/3aoozxte/19/
function main() {
canvas = document.createElement("canvas");
canvas.width = COLS*20;
canvas.height = ROWS*20;
ctx = canvas.getContext("2d");
document.body.appendChild(canvas);
ctx.font = "12px Helvetica";
frames = 0;
keystate = {};
started = false;
// keeps track of the keyboard input
document.addEventListener("keydown", function(evt) {
keystate[evt.keyCode] = true;
if(keystate[Key_ENTER] && !started) { // Start the game if it's not started and Enter is pressed.
started = true;
init();
loop();
}
});
document.addEventListener("keyup", function(evt) {
delete keystate[evt.keyCode];
});
//Attempting to create a welcome screen
startGameScreen();
}
function startGameScreen() {
ctx.font = "25px Helvetica";
drawStartScreen();
}

This might be the one you are looking for.
document.onkeydown = function(evt) {
evt = evt || window.event;
if (evt.ctrlKey && evt.keyCode == 90) {
alert("Ctrl-Z was pressed");
}
else {
var kc = evt.keyCode
switch(kc){
case 13 : alert("Enter was pressed"); break
case 37 : alert("Left Key was pressed"); break
case 38 : alert("Up Key was pressed"); break
case 39 : alert("Right Key was pressed"); break
case 40 : alert("Down Key was pressed"); break
// default : alert(kc + " was pressed");//used to check for key value
}
}
};
Fiddle Key Events
Adding the function on your listener..
document.onkeydown = function(evt) {
if (evt.keyCode == 13) {
started = true;
init();
loop();
}
}
Updated and working Game
Complete reference Complete Handling Key Events

I prefer using jquery
$(document).keypress(function(e)
{
if (e.which == 13)
{
//Your code
}
});

Block F5 key using JavaScript

I have written some code to block the F5 key on web page. It's working fine except when I have to display a large amount of data. If you press the F5 key during the loading duration in which the HTML and JavaScript code is generated, my page gets refreshed.
Here is the code that I am using to block the F5 key:
document.onkeydown = fn;
var fn = function (e){
if (!e)
var e = window.event;
var keycode = e.keyCode;
if (e.which)
keycode = e.which;
var src = e.srcElement;
if (e.target)
src = e.target;
// 116 = F5
if (116 == keycode) {
// Firefox and other non IE browsers
if (e.preventDefault) {
e.preventDefault();
e.stopPropagation();
// Internet Explorer
}else if (e.keyCode){
e.keyCode = 0;
e.returnValue = false;
e.cancelBubble = true;
}
return false;
}
});
I think this code is not working when the HTML and JavaScript code is generating.

I have some very simple code for preventing F5 that I use myself. Works in IE, Chrome and Firefox:
function disableButtonsDown(e) {
if ((e.which || e.keyCode) == 116) e.preventDefault();
};
$(document).on("keydown", disableButtonsDown);

document.onkeydown=disableF5;
var version = navigator.appVersion;
function disableF5(e)
{ var keycode = (window.event) ? event.keyCode : e.keyCode;
if ((version.indexOf('MSIE') != -1))
{ if (keycode == 116)
{ event.keyCode = 0;
event.returnValue = false;
return false;
}
}
else
{ if (keycode == 116)
return false;
}
}