如何在jQuery中识别长按箭头键

时间:2012-05-27 19:10:02

标签: javascript jquery keypress keydown

我有两个选项keypresskeydown。我倾向于使用keypress,因为它记录了一个事件,即使重复键,即长按键。但问题是keypress仅在Firefox中记录特殊键,例如箭头键。如果我想通过浏览器进行操作,那么我必须使用keydown,但是长按将被记录为单个事件。

感谢任何帮助。

3 个答案:

答案 0 :(得分:9)

var pressed = null;
$(element).on('keydown', function(event) {
    pressed = +new Date();
    // do whatever else you need upon key down
});
$(element).on('keyup', function(event) {
    var duration = +new Date() - pressed;
    pressed = null;
    // do whatever you need to do based on the duration of the press
});

我把它作为练习留给你来解决对多个并发键的支持。

答案 1 :(得分:3)

你可以使用两个事件,如:

var timer=false,
    pressedTime = 1000; //one second

$('input').on({
    keydown: function(e) {
        var charCode = (e.which) ? e.which : event.keyCode, keyP;
        if (charCode===37) keyP = 'left';
        if (charCode===38) keyP = 'up';
        if (charCode===39) keyP = 'right';
        if (charCode===40) keyP = 'down';        
        if (!timer) timer = setTimeout(function() {
           clearTimeout(timer);
           timer=false;
           alert(keyP+' arrow key held down for 1 second');
        }, pressedTime);
    },
    keyup: function() {
        clearTimeout(timer);
        timer=false;
    }
});​

FIDDLE

答案 2 :(得分:0)

有一个名为jQuery Responsiveness的插件可能有助于实现这一目标。