CODEWITHSUNDEEP
javascriptjqueryjquery-events
DanC
DanC

Reputation: 1307

Arrow key events with jQuery not working in anything other than Firefox

I have created a portfolio site and whilst browsing the images, I want users to be able to navigate using the arrow keys. I have the following code which works fine in Firefox but not Chrome, Safari or IE.

$(document).keypress(function (evt) {
    if (evt.keyCode == 39) { 
      evt.preventDefault(); 
      $.scrollTo('+=564px', 800, { axis:'x' }); 
    } else if (evt.keyCode == 37) { 
      evt.preventDefault();
      $.scrollTo('-=564px', 800, { axis:'x' });
    }
  });

I have the scrollTo plugin installed and working as well as a valid jQuery file so it's not an issue with these. Can anyine tell me why this might not function in other browsers?

Live example here.

Help always appreciated!

Upvotes: 1

Views: 3254

Answers (2)

Andrea
Andrea

Reputation: 20493

If you want to make this cross-browser, you should also be aware the keyCodes may not be the same across browsers. jQuery offers the property event.which, which is supposed to normalize the differences between browers.

http://api.jquery.com/event.which

From the docs:

event.which normalizes event.keyCode and event.charCode. It is recommended to watch event.which for keyboard key input.

Upvotes: 3

Barrie Reader
Barrie Reader

Reputation: 10715

Try this:

$(document).bind('keydown',function(evt) {

});

instead of

$(document).keypress(function(evt) {

});

This is because IE handles KeyPress differently to FireFox.

EDIT as you were so nice about getting a decent answer:

I would also change your statement to a switch:

$(document).bind('keydown',function(evt) {
        switch(evt.keyCode) {
        case 65:
                    alert("you pressed key 65");
                    break;
                }
});

Upvotes: 6

Related Questions