jQuery keydown 事件，如何不return 到最近的状态

Question

我从昨天开始尝试解决我的问题，但没有结果:(

我想做的是在我按下箭头（向上或向下）时 "addClass" 到某个元素。效果不错

(...)

// search-input is a div with contenteditable="true"
// search-input as <input> doesn't work too
// search-list is a simple div

$('#search-input').on('keydown', function(e) {
    if(e.which == 40 || e.keyCode == 40) {
        e.preventDefault();
        $('#search-list').children('p').eq(i).addClass('on');
        i++;
        $(this).stop(true);
    }
}

(...)

但是当我释放箭头键时，addClass 事件是来自所选元素的 "removing"。关键是我希望 class "on" 即使在我释放箭头键后也能附加到这个元素，而不仅仅是当我按住键时。

"i" 变量也有类似的问题，不会递增。按箭头键增加一次并在释放键后立即减少。实际上，尽管多次按键，"i" 变量值仍然相同。

我想做的是一个带有文本输入的下拉列表。实际上，类似于 google.com。我的意思是，当我在 google 搜索栏中输入内容时，几乎没有显示提示，我可以使用箭头键浏览它们。除了箭头键导航之外，我几乎获得了所有这些功能。

我也尝试过 keyup 和 keypress 事件，但没有积极的结果。

Answer 1

我试过你的代码，它工作正常...检查这个 jsfiddle

var i = 0;
$('#search-input').on('keydown', function(e) {
    if(e.which == 40 || e.keyCode == 40) {
        e.preventDefault();
        $(this).addClass('red');
        alert(i++)
    }
});

http://jsfiddle.net/hjfgu4yc/

jQuery keydown 事件，如何不return 到最近的状态

jQuery keydown event, how not to return to recent state

html

javascript

jquery

events

keydown