Arrow keys do not work in Firefox

Question

We create slide shows in HTML / CSS / JS, but for some reason it does not work in Firefox. It works in Webkit browsers without problems.

The code looks like this:

keyPress : function() { $( document.body ).keydown(function(e) { if ( e.keyCode === 37 || e.keyCode === 39 || e.which == 37 || e.which === 39) { e.preventDefault(); ( e.keyCode === 39 || e.which === 39 ) ? Slides.next() : Slides.prev(); } }); }, 

If I use only $( document ) instead of ( document.body ) , it changes my colors, but the slides do not change.

For some reason, Firefox (7.0.1, OSX Lion) does not receive keystrokes. It works in Safari / Chrome without any problems.

The site we are testing on is: #took link

Answer 1

UPDATE: I think your problem is using the "document.body" selector. This works for me in Chrome, but not in Firefox ( http://jsfiddle.net/Jncrh/2/ ) Try just selecting the “document” and see if it works. ( http://jsfiddle.net/Jncrh/5/ )

 $(document).bind('keydown',function(e){ if (e.which==37 || e.which==39) { e.preventDefault(); if (e.which==37) { alert("going back"); } else { alert("going forward"); } } }); 

Firefox can get keystrokes in the above example, so I suspect the problem lies elsewhere in your code.

PREVIOUS: A quick Google search reveals that Firefox uses event.charCode instead of event.keyCode . Try the following:

 key = e.keyCode ? e.keyCode : e.which ? e.which : e.charCode; if (key===37 || key===39) {... 

However, jQuery should be able to select all those who have event.which , so I don’t understand why this isn’t “working as is” for you.

Answer 2

  if ($.browser.mozilla) { $(document).keypress (keyType); } else{ $(document).keydown (keyType); } function keyType(e){ if (e.keyCode==37 || e.keyCode==39) { e.preventDefault(); if (e.which==37) { //handle left } else { //handle right } } } 

Answer 3

In keydown and keyup all major browsers support the keyCode property of the corresponding event, so there is no need for the which property. In addition, in order to catch key events throughout the document, you need to attach the listener to the document, not to the body.

Here is a specific page on key JavaScript events: http://unixpapa.com/js/key.html

And here is the revised version of your code:

 $(document).keydown(function(e) { var leftArrow = (e.keyCode == 37), rightArrow = (e.keyCode == 39); if (leftArrow || rightArrow) { e.preventDefault(); rightArrow ? Slides.next() : Slides.prev(); } });