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

Question

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

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

Answer 1

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

以下代码使用上述方法。您要处理 keydown 事件（真实的和模拟的）的代码应该放在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;
};

Answer 2

您可以使用按键并检查 e.keyCode == 38,40 而不是 e.which 或 e.charCode 这在 Mac 和 Win 中是一致的。

$('#test').bind($.browser.mozilla ? 'keypress' : 'keyup', function(e) {
    if ( (e.which || e.keyCode) == 40 ) { /* doSometing() */ }
});

请参阅JavaScript Madness：键盘事件（3.2. 字符事件返回的值）和 MDC 上的 event.keyCode。