javascript - 按住箭头键时，如何在 Firefox 中获取自动重复的按键事件？

Question

我有几个可编辑的 div。我想通过按箭头键(38 和 40)跳过它们。

Mac OS 和 Linux 上的 Firefox 3 不会重复按住该键的事件。显然只有 keypress 事件支持重复。由于键 38 和 40 仅在 keydown 上受支持，我有点卡住了。

Answer 1

是的，你有点卡住了。您可以通过使用计时器来模拟您想要的行为，直到收到相应的 keyup，但这显然不会使用用户计算机的键盘重复设置。

下面的代码使用了上面的方法。您要处理按键事件(真实的和模拟的)的代码应该放在 handleKeyDown 中:

var keyDownTimers = {};
var keyIsDown = {};
var firstKeyRepeatDelay = 1000;
var keyRepeatInterval = 100;

function handleKeyDown(keyCode) {
    if (keyCode == 38) {
        alert("Up");
    }
}

function simpleKeyDown(evt) {
    evt = evt || window.event;
    var keyCode = evt.keyCode;
    handleKeyDown(keyCode);
}

document.onkeydown = function(evt) {
    var timer, fireKeyDown;
    evt = evt || window.event;
    var keyCode = evt.keyCode;

    if ( keyIsDown[keyCode] ) {
        // Key is already down, so repeating key events are supported by the browser
        timer = keyDownTimers[keyCode];
        if (timer) {
            window.clearTimeout(timer);
        }

        keyIsDown[keyCode] = true;
        handleKeyDown(keyCode);

        // No need for the complicated stuff, so remove it
        document.onkeydown = simpleKeyDown;
        document.onkeyup = null;
    } else {
        // Key is not down, so set up timer
        fireKeyDown = function() {
            // Set up next keydown timer
            keyDownTimers[keyCode] = window.setTimeout(fireKeyDown, keyRepeatInterval);
            handleKeyDown(keyCode);
        };

        keyDownTimers[keyCode] = window.setTimeout(fireKeyDown, firstKeyRepeatDelay);
        keyIsDown[keyCode] = true;
    }
};

document.onkeyup = function(evt) {
    evt = evt || window.event;
    var keyCode = evt.keyCode;
    var timer = keyDownTimers[keyCode];
    if (timer) {
        window.clearTimeout(timer);
    }
    keyIsDown[keyCode] = false;
};