Develop Reference

Is it necessary to null an onkeydown method?

My code (seen below) seems to work properly, however, I have been reading (e.g. in How can I avoid autorepeated keydown events in JavaScript?) that in some instances, onkeydown() method needs to be nulled. Why is this?
The intent of this code is to listen for a left or right arrow press (on the index file) and send a function to an iframe, which then forwards another function to another embedded iframe. There was probably a better way to do this, any input?
//Arrow key functionality
document.onkeydown = checkKey;
function checkKey(e) {
e = e || window.event;
if (e.keyCode == '39') {
// right arrow
document.getElementById('CENTER').contentWindow.fwdFrame();
}
else if (e.keyCode == '37') {
// left arrow
document.getElementById('CENTER').contentWindow.bkFrame();
}
}
The iframe ('CENTER') has the following code:
//Arrow Key Functionality - Forwarded from Index
function fwdFrame() {
document.getElementById('CONTROL').contentWindow.GoNext();
}
function bkFrame() {
document.getElementById('CONTROL').contentWindow.GoBack();
}
Any help appreciated!

Bind arrow keys to navigation with jQuery

For the purposes of this test I have some basic html:
Previous
Next
I have a fairly straightforward jquery function:
var prev = $('.prev');
var next = $('.next');
$('body').on('keydown',function(e){
if(e.which == 37){
prev.trigger('click');
}else if(e.which == 39){
next.trigger('click');
}
console.log(e.which);
e.preventDefault();
});
The console is logging each key pressed, however this is not binding the click event to each of the href's and I am not sure why.
In addition I think using e.preventDefault(); is stopping other key actions on the page. In the other keyCode functions in my app I am not using return false or preventDefault();
Is it possible to wrap the anchors in a div and bind the keydown only to that container for example:
<div class="nav">
Previous
Next
</div>
$('.nav').on('keydown', function(){} // etc
I have a jsfiddle here: https://jsfiddle.net/lharby/sva0a4d1/

You can try this:
$('body').on('keydown',function(e){
if(e.which == 37){
$('a.prev')[0].click()
}else if(e.which == 39){
$('a.next')[0].click()
}
});

Do something on left/right arrow press

I want to trigger a click event on another element, when a left or right arrow is pressed. Here is the code:
$(window).keypress(function (e) {
var key = e.which;
if(key == 13 || key == 39) { // the enter key code or right arrow
$('.next').click();
return false;
} else if(key == 37) { // left arrow
$('.prev').click();
return false;
}
});
With Enter key it works like a charm, however on arrow press, nothing happens, like a Magikarp that uses splash! :) What am I missing?
Relevant question: Press left and right arrow to change image?

The arrow keys don't trigger a keypress event, but they do trigger a keyup or keydown event.
Best to use keyup, because keydown can be triggered multiple times while you're holding down a key.
$(window).keyup(function (e) {
var key = e.which;
if(key == 13 || key == 39) { // the enter key code or right arrow
$('.next').click();
return false;
} else if(key == 37) { // left arrow
$('.prev').click();
return false;
}
});

Use arrow keys to change focus on buttons

I am using the JQuery UI Dialog to create a pop-up. The pop-up has two buttons. The first button is automaticly selected by JQuery. I can change the selection between the buttons and the exit button with 'tab'.
I want to change the selection (only between the two buttons) also with the left and right arrow keys on the keyboard.
Where do I have to catch the arrow key down events and how can I change the focus of the buttons?
Thanks for your help!

I would do it something like that :)
$('body').on('keydown', '#terug', function(e) {
if (e.keyCode === 39) { //right arrow
$('#ok').focus();
}
});
$('body').on('keydown', '#ok', function(e) {
if (e.keyCode === 37) { //left arrow
$('#terug').focus();
}
});
Try it :) And if this won't work then go global without specifying selector in event definition:
$('body').on('keydown', function(e) {
if (e.keyCode === 39 && $('#terug').is(':focus')) { //right arrow
$('#ok').focus();
}
});
Hope this will help! :) If not give me a comment and i will try to fix this. :)

Thanks for your help! It worked. I added my solution to complete this question.
I bind the keydown event only on the ui-buttons:
$(document).on('keydown', '.ui-button', handleUIButtonKeyDown);
After that I handle the left and right arrow keys
function handleUIButtonKeyDown(event) {
if (event.keyCode == 37) {
//left arrow key pressed, select the previous button
makeButtonFocus($(this).prev(".ui-button"));
} else if (event.keyCode == 39) {
//right arrow key pressed, select the next button
makeButtonFocus($(this).next(".ui-button"));
}
}
function makeButtonFocus($button) {
$button.addClass("ui-state-focus");
$button.focus();
}

Here's a more generic answer
works on any number of buttons irregardless of DOM structure (btns need not be siblings)
$('body').on('keydown', function(e) {
if (e.keyCode === 37) { //left arrow
modalKeyboardNav("prev")
} else if (e.keyCode === 39) { //right arrow
modalKeyboardNav("next");
}
});
function modalKeyboardNav(dir) {
if (!$("body").hasClass("modal-open")) {
// no modal open
return;
}
var $curModal = $(".modal.show"),
$curFocus = $(document.activeElement),
$focusable = $curModal.find(".btn"),
curFocusIdx = $focusable.index($curFocus);
if (curFocusIdx < 0) {
// nothing currently focused
// "next" will focus first $focusable, "prev" will focus last $focusable
curFocusIdx = dir == "next" ? -1 : 0;
}
if (dir == "prev") {
// eq() accepts negative index
$focusable.eq(curFocusIdx - 1).focus();
} else {
if (curFocusIdx == $focusable.length - 1) {
// last btn is focused, wrap back to first
$focusable.eq(0).focus();
} else {
$focusable.eq(curFocusIdx + 1).focus();
}
}
}

jQuery Camera slider keyboard controls

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();
}
}
}