Safari中的.keyup()向上和向下箭头

时间:2012-05-24 08:31:08

标签: jquery safari

我正在尝试将.keyup(e)附加到向上和向下箭头。它在Firefox中运行良好,但在Safari中运行不正常。所有其他箭头在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();
        }
    });

编辑: 指向我网站工作演示的链接 - http://www.ryan-neil.com

应该早点补充......

2 个答案:

答案 0 :(得分:2)

工作演示请在这里试试我在OSX狮子狩猎之旅并且它有效:http://jsfiddle.net/DRgRv/1/

因此,单击灰色框,然后使用向上和向下箭头键进行导航:

如果这有帮助,请不要忘记投票并接受。

<强>码

$(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;
    }
})​

答案 1 :(得分:1)

您正在使用哪种版本的safari

jquery support关于浏览器兼容性

jQuery积极支持这些浏览器:

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

应该考虑使用它们的任何问题并将其报告为jQuery中的错误。

已知问题:

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

jQuery通常可以与Konqueror和Firefox 1.0.x一起使用,但可能会有一些意想不到的错误,因为我们不会定期测试它们。

你可以测试关键事件

try test here

or here

你仍然可以尝试这样破解它来自stackoverflow中的另一篇文章

Keypress是一个令人困惑的事件。虽然keydown和keyup会告诉你键盘上的哪个特定键已关闭或刚刚恢复,但是按键事件应该告诉你屏幕上会出现什么字符,这就是你引用的jquery文档说的原因:

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

更糟糕的是,Safari不会触发无法在屏幕上写入内容的按键事件 - 这就是为什么箭头键不起作用的原因。但是,Firefox会触发箭头键的按键事件。两者都是规范的合理实现,所以不要指望要么改变。这就是为什么有人建议坚持使用keydown或keyup。

但是,当按住某个键并且您想使用箭头键执行此操作时,您似乎希望利用按键事件的重复方式(在Firefox中)。如果是这种情况,您需要编写一个查看keydown和keypress的处理程序。以下是浏览器对按住箭头键的两种不同方式:

* Firefox 会注册keydown事件并重复按键事件  (注意:只需按一次键即可注册keydown和keypress事件)

* Safari 注册keydown事件并重复keydown事件  快速破解使箭头键工作得相当好并让密钥重复发挥作用是:

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