.keyup() up and down arrows in Safari

Question

I'm trying to attach a .keyup(e) to the up and down arrows. It works fine in Firefox but not in Safari. All of the other arrows work fine in Safari.

$(document.documentElement).keyup(function (event) {

        if (event.keyCode == 37) 
        {
        // go left
            $('.left').click();
        } 
        else if (event.keyCode == 39) 
        {
        // go right
            $('.right').click();
        }
        else if (event.keyCode == 38) 
        {
        // next project
            $('a.up div.arrow').click();
        }
        else if (event.keyCode == 40) 
        {
        // previous project
            $('a.down div.arrow').click();
        }
        else if (event.keyCode == 32) 
        {
        // info
            $('aside').click();
        }
    });

EDIT: A link to a working demo of my website — http://www.ryan-neil.com

Should've added that sooner...

Answer 1

Working Demo please try here I am on OSX lion safari and it works: http://jsfiddle.net/DRgRv/1/

So click on the grey box and then use up and down arrow keys to navigate:

d'uh don't forget to up vote and accept if this helps.

code

$(document).keyup(function(e) {
    switch (e.which) {
    case 37:
        $('div').stop().animate({
            left: '-=10'
        }); //left arrow key
        break;
    case 38:
        $('div').stop().animate({
            top: '-=10'
        }); //up arrow key
        break;
    case 39:
        $('div').stop().animate({
            left: '+=10'
        }); //right arrow key
        break;
    case 40:
        $('div').stop().animate({
            top: '+=10'
        }); //bottom arrow key
        break;
    }
})​

Answer 2

which version of safari ar you using

jquery support About Browser Compatibility

jQuery actively supports these browsers:

Firefox Current - 1 version
Internet Explorer 6+
Safari Current - 1 version
Opera Current - 1 version
Chrome Current - 1 version 

Any problem with them should be considered and reported as a bug in jQuery.

There are known problems with:

Mozilla Firefox 1.0.x
Internet Explorer 1.0-5.x
Safari 1.0-2.0.1
Opera 1.0-9.x
Konqueror 

jQuery generally works with Konqueror and Firefox 1.0.x, but there may be some unexpected bugs since we do not test them as regularly.

you can test key events

try test here

or here

you still can try hacking it like this From another post in stackoverflow

Keypress is a confusing event. While keydown and keyup will tell you which specific key on your keyboard is down or just came back up, the keypress event is supposed to tell you what character would appear on the screen, that's why the jquery documentation that you referenced says:

For example, a lowercase "a" will be reported as 65 by keydown and keyup, but as 97 by keypress.

To make things worse Safari doesn't trigger keypress events for stuff that doesn't write something onto the screen—that's why arrow keys won't work. Firefox, however, does trigger keypress events for arrow keys. Both are reasonable implementations of the spec, so don't expect either to change. That's why there was the suggestion to just stick with keydown or keyup.

However, it looks like you want to take advantage of how the keypress event repeats (in Firefox) when a key is held down and you want to do this with an arrow key. If that's the case, you need to write a handler that looks at both keydown and keypress. here are the two different ways browsers react to an arrow key being held down:

*Firefox registers a keydown event and also repeats keypress events (note: just hitting the key once will register both a keydown and a keypress event)

*Safari registers a keydown event and repeats the keydown event A quick hack to make that work reasonably well for arrow keys and get the key repeats to work is:

function moveItem(evt) {
    // do something with `this` and evt.keyCode here...
}

$(document.documentElement)
    .keypress(function(evt) {
        if ($.data(this, '_lastKeyEvent') != 'keydown') {
            // since firefox will do both a keydown and a keypress for the first
            // keydown, we ignore the very first keypress
            moveItem.call(this, evt);
        }
        $.data(this, '_lastKeyEvent', 'keypress');
    })
    .keydown(function(evt) {
        moveItem.call(this, evt);
        $.data(this, '_lastKeyEvent', 'keydown');
    });