javascript - jQueryで矢印キーの長押しを識別する方法

Question

私には 2 つのオプションがkeypressありますkeydown。keypressキーが繰り返された場合、つまりキーが長押しされた場合でも、イベントを記録するので、使用する傾向があります。しかし問題は、keypress矢印キーなどの特殊なキーを Firefox だけに記録することです。クロスブラウザでやりたい場合は使用する必要がありますkeydownが、長押しは単一のイベントとして記録されます。

どんな助けでも大歓迎です。

Answer 1

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

複数のキーが同時に押された場合のサポートについては、演習として残します。

Answer 2

次のように、2 つのイベントを使用できます。

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

フィドル

Answer 3

これを実現するのに役立つjQuery Responsivenessという名前のプラグインがあります。