当使用上下箭头时停止光标移动

Question

我有一个实时搜索输入框，它显示结果并允许您在结果弹出时使用上下箭头，但是我希望防止使用上下箭头时光标向左或向右移动。我无法解决这个问题。我尝试过e.preventDefault()但是没有成功。以下是我尝试过的方法：

    if(e.which == 40){

        e.preventDefault();

        current = results.find('li.hover');
        current.removeClass();
        var next = current.next('li');

        if(next.length == 0){
            next = current.parent().parent().parent().next().find('li:first');

            /* Go back to the top */
            if(next.length == 0){
                next = results.find('li:first');
            }
        }

        next.addClass('hover');
        return false;
    }

谢谢！

- mikelbring

---

顺便提一下，尝试使用.closest()（参考）代替多个.parent()函数 - 这样可以使代码更易读 ;) - Mottie

Answer 1

您是在绑定 onkeyup 还是 keydown 事件？如果您正在使用 keydown，您可以防止它发生；如果您使用的是 keyup，则事件已经发生。否则，e.preventDefault() 应该能够起作用。

- Niels

---

我使用 live('keyup')，当我将其设置为 keydown 时，它根本不允许在我的字段中输入任何内容。我甚至没有使用 preventDefaults。 - mikelbring

那么，你可能在函数末尾返回false或在其他位置使用e.preventDefault()。 - Niels

我必须拆分我的搜索并将其放在keyup中，并使箭头在keydown中工作。但是这个答案很有帮助！ - mikelbring

Answer 2

你可以这样做...

$('#content').on('keydown', function(event) {
    var key = event.originalEvent.key;
    if (key == 'ArrowDown' || key == 'ArrowUp') {
        event.preventDefault();
    }
});

$('#content').on('keyup', function(event) {
    // do stuff
});

- spaced_uk