javascript - Arrow key events with jQuery not working in anything other than Firefox - Stack Overflow

admin管理员组

文章数量:1406924

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!

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!

• javascript
• jquery
• jquery-events

Share Improve this question Follow edited Dec 13, 2022 at 9:39 Brian Tompsett - 汤莱恩 5,8937272 gold badges6161 silver badges133133 bronze badges asked Feb 22, 2011 at 16:36 DanCDanC 1,30744 gold badges2424 silver badges4242 bronze badges 2

• Do you get the expected behavior in FF3 or 4? In FF3, it's definitely wonky. – Matt Ball Commented Feb 22, 2011 at 16:40
• I'm using FF 3.6 and it works fine to me. It has now been updated with the code suggested by @Neurofluxation below, see if that makes any difference. – DanC Commented Feb 22, 2011 at 16:47

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 6

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

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./event.which

From the docs:

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

本文标签： javascriptArrow key events with jQuery not working in anything other than FirefoxStack Overflow