Question

I am making an HTML slideshow by myself and was able to create most of the thing. The place where I am stuck is the keyboard events. That is forward and backward arrow. I need to know how to handle these using JavaScript or JQuery. These button when pressed would trigger an event so as to move to the next slide or go to the previous one. I also want to mention that my slides are also interactive HTML, as in you can fill in data, validate etc using them. SO i dont want the keyboard events to hinder while the user is interacting with the form or other content on the page via Keyboard (eg. Filling in a form,date etc).
How to go about this ?

Answer 1

There are 3 different events for handling keyboard input: keyup, keydown, and keypress. Not all are fired on all keys, and some fire different codes depending on operating system. Check out quirksmode for more info.

jQuery has corresponding events for each of these.

From jQuery site:

Note that keydown and keyup provide a code indicating which key is
pressed, while keypress indicates which character was entered. For
example, a lowercase “a” will be reported as 65 by keydown and keyup,
but as 97 by keypress. An uppercase “A” is reported as 65 by all
events. Because of this distinction, when catching special keystrokes
such as arrow keys, .keydown() or .keyup() is a better choice.

To avoid handling these events when user is interacting with the form, you might want to turn the behavior off any time a form field has focus, and turn it back on when the form fields are blurred. That way, using these arrows to navigate an input field wouldn’t cause slideshow traversal.