I am making a JavaScript onkeypress function.
function report() {
while (1 == 1) {
window.onkeypress = function(event) {
/* from this point down, keylog functions. */
// above is a variable
if (event.keyCode == 32) {
console.log("Spacebar._rep")
}
if (event.keycode == 33) {
console.log("escalation-Mark._rep")
}
if (event.keycode == 34) {
console.log("quotation-Mark._rep")
}
if (event.keycode == 35) {
console.log("hashtag._rep")
}
if (event.keycode == 36) {
console.log("dollar-Sign._rep")
}
if (event.keycode == 37) {
console.log("percent-Symbol._rep")
}
if (event.keycode == 38) {
console.log("pi")
}
}
}
}
report()
whenever i run this code, however it freezes all forms of input, i can still scroll, open tabs, and click. I cannot close the tab, reload, or change the JavaScript code. I have tried it with and without variables, and i have tried modifying it. It works absolutely fine when their is only one key function, but once i add several it freezes.
I have de-dented, and indented nothing has worked.
I have checked out a few other similar questions, which said to do things like remove variable, and i did that and it still freezes.
You're creating an infinite loop which freezes that tab.
while (1 == 1) {
//infinite loop
}
Instead of doing that, just attach a listener to the window that fires a callback each time the event occurs:
window.addEventListener('keypress', function (e) {
console.log(e)
});
The onkeypress property sets and returns the onKeyPress event handler
code for the current element.
As you current element is window when you run report the event listener will listen to any keypress, there is no really need of a while statement, it actually make freeze you app.
function report() {
window.onkeypress = function(event) {
if (event.keyCode == 32) {
console.log("Spacebar._rep")
}
if (event.keycode == 33) {
console.log("escalation-Mark._rep")
}
if (event.keycode == 34) {
console.log("quotation-Mark._rep")
}
if (event.keycode == 35) {
console.log("hashtag._rep")
}
if (event.keycode == 36) {
console.log("dollar-Sign._rep")
}
if (event.keycode == 37) {
console.log("percent-Symbol._rep")
}
if (event.keycode == 38) {
console.log("pi")
}
}
}
report()
1
It is freezing because while (1==1) is running infinitely, you should not write you code like this. It is blocking the browser
window.onkeypress = function(event) {
/* from this point down, keylog functions. */
// above is a variable
if (event.keyCode == 32) {
console.log("Spacebar._rep")
}
if (event.keycode == 33) {
console.log("escalation-Mark._rep")
}
if (event.keycode == 34) {
console.log("quotation-Mark._rep")
}
if (event.keycode == 35) {
console.log("hashtag._rep")
}
if (event.keycode == 36) {
console.log("dollar-Sign._rep")
}
if (event.keycode == 37) {
console.log("percent-Symbol._rep")
}
if (event.keycode == 38) {
console.log("pi")
}
}
this is all that is needed, the code will be "asynchronously" called
Try removing "while (1 == 1)". It seems like it doesn't leave that while-loop.
Related
I want to have an event listener that console logs a text string after a ctrl + left/right arrow key is pressed simultaneously. However, the event isn't being picked up by the function below:
$(document).keydown(function (event) {
if (event.which === 37 && event.ctrlKey) {
console.log('ctrl-left');
}
if (event.which === 39 && event.ctrlKey) {
console.log('ctrl-right');
}
else {
console.log('nothing detected');
}
});
Any idea what i'm doing wrong?
There is a problem in your if branches, making a CTRL+Left keypress to log both ctrl-left and nothing detected at the same time.
Also, the browser's default event handling would need to be stopped to avoid issues.
This worked for me on Firefox 44.0.2:
$(document).keydown(function (event) {
event.preventDefault();
if (event.which === 37 && event.ctrlKey) {
console.log('ctrl-left');
} else if (event.which === 39 && event.ctrlKey) {
console.log('ctrl-right');
} else {
console.log('nothing detected');
}
});
Here is my code
document.onkeydown = function (a) {
if (a.which == 13) {
alert("Not Anymore");
}
}
document.onkeydown = function (b) {
if (b.which == 65) {
auto();
}
}
document.onkeydown = function (c) {
if (c.which == 83) {
auto2();
}
}
Only the last snippet works can someone explain why this is happening
check my website and you can see it isnt working when you press a but when you press b it is
Thanks, I appreciate the help and feedback
You're binding the same event on the document multiple times. So, the later event handlers override the previous event handlers just like the functions with same name does. You need to bind only one event handler and use if... else in it.
You can use this
document.onkeydown = function (e) {
if (e.which == 13) {
alert("Not Anymore");
} else if (e.which == 65) {
auto();
} else if (e.which == 83) {
auto2();
}
};
Also, use addEventListener instead of onkeydown.
document.addEventListener('keydown', function (a) {
if (a.which == 13) {}
...
}, false);
I want to move focus right, left, up and down using arrow keys in JavaScript.
I am able to implement right functionality using JavaScript.
This will help you.
$(document).keydown(
function(e)
{
if (e.keyCode == 37) {
$(".tab:focus").prev().focus();
}
if (e.keyCode == 38) {
//code for up key
}
if (e.keyCode == 39) {
$(".tab:focus").next().focus();
}
if (e.keyCode == 40) {
//code for down key
}
}
);
I'm using the Camera jQuery slideshow on my site, but it lacks being able to control with keyboard which I need. In their google group someone posted the previous/next commands which work, however I still need the pause/resume keyboard button to work (in my case I'm using the spacebar). What would I need to enter to have .camera_play also controlled by the spacebar? Is that even possible?
Here is the code that pertains to the problem:
$(document.documentElement).keyup(function (event) {
// handle cursor keys
if (event.keyCode == 37) {//go left
$('.camera_prev').click();
} else if (event.keyCode == 39) { //go right
$('.camera_next').click();
} else if(event.keyCode == 32) { // spacebar to stop
$('.camera_stop').click();
After seeing how camera plugin works, you can use the :visible selector to click on the currently active action (which may be stop or resume), like this:
$(document.documentElement).keyup(function (event) {
// handle cursor keys
if (event.keyCode == 37) {//go left
$('.camera_prev').click();
} else if (event.keyCode == 39) { //go right
$('.camera_next').click();
} else if(event.keyCode == 32) { // spacebar to stop
$('.camera_stop , .camera_play').filter(':visible').click();
}
});
The documentation doesn't show this, but I dug into the code and it looks like when you click the stop button, it adds a class to the main wrapper called 'paused'. Here's how you can update the your code to handle both pausing and starting with the space bar.
$(document.documentElement).keyup(function (event) {
// handle cursor keys
if (event.keyCode == 37) {//go left
$('.camera_prev').click();
} else if (event.keyCode == 39) { //go right
$('.camera_next').click();
} else if(event.keyCode == 32) { // spacebar to stop
if($('.camera_wrap').hasClass('paused')){
$('.camera_play').click();
}
else{
$('.camera_stop').click();
}
}
}
this is what I got so far
http://jsfiddle.net/qEKfg/
It's two buttons that activate on click and look like keyboard keys.
I'm trying to make it where they will only activate (animate) on a keyboard press of the related keys (CTRL and D)
This will make an 'animated buttons' effect for bookmarking my website, because CTRL+D is the hotkey to bookmark a page.
But I don't know how to set it up to work with keyboard keys in html or jQuery
if some could help I would be really REALLY grateful
The following should work for you. However, note that due to the window losing focus, I've added in a timer to release the on-screen 'buttons' after 5 seconds, as the window losing focus at that specific time prevents the keyup event from firing.
$(document).ready(function() {
var keys = [];
$(window).on('keydown keyup', function(e) {
if (e.type == "keydown") {
if (e.keyCode == 17 || e.keyCode == 91) {
$("a.a_demo_two:contains('CTRL')").addClass("active");
keys[0] = e.keyCode;
}
else if (e.keyCode == 68) {
$("a.a_demo_two:contains('D')").addClass("active");
keys[1] = 68;
};
if ((keys[0] == 17 || e.keyCode == 91) && keys[1] == 68) {
setTimeout(function() {
$('a.a_demo_two').removeClass("active");
}, 5000);
}
}
else {
if (e.keyCode == 17 || e.keyCode == 91) {
$("a.a_demo_two:contains('CTRL')").removeClass("active");
}
else if (e.keyCode == 68) {
$("a.a_demo_two:contains('D')").removeClass("active");
}
keys = [];
}
});
});
DEMO
Basically you just put handler on keydown and keyup events and trigger whatever you want.
Something like that
$('body').on('keydown', function(e) {
console.log(e)
if (e.ctrlKey) $('.a_demo_two').trigger('mousedown')
if (e.keyCode === 100) $('.a_demo_two').trigger('mousedown')
});
$('body').on('keyup', function(e) {
console.log(e)
if (e.ctrlKey) $('.a_demo_two').trigger('mouseup')
if (e.keyCode === 100) $('.a_demo_two').trigger('mouseup')
});