Question

我有一个文字输入。我想这样 - 当用户按下向下箭头键时，焦点应该从输入转移到输入下方的div列表中的第一个元素，并在我们持续按下向下键时向下移动，当用户按下时按下回车键，该div中的文本应设置为输入值。反之亦然，向上箭头键，即如果用户按下向上箭头键，焦点应转移到列表中的最后一个元素，并继续向上移动，因为我们一直按下向上键。

这是我创建的小提琴 - Example

Answer 1

$(function(){
    var $list = $('#list').children();
    var index = 0;

    function down(){
        if(index == $list.length - 1) index = 0;
        else index++;           
        move();
    };
    function up(){
        if(index == 0) index = $list.length - 1;
        else index--;           
        move();
    };

    function enter(){
        var val = $($list[index]).html();
        $('input').val(val);
    };

    function move()
    {
        $list.removeClass('highlight');
        $($list[index]).addClass('highlight');
    };

    // highlights first element 
    move();

    $('input').on('keydown', function(e){
        switch(e.keyCode)
        {
            case 13:
                enter();
                break;
            case 40:
                down();
                break;
            case 38:
                up();
                break;
        }
    });
});

JSFiddle - http://jsfiddle.net/tt0nnzvm/4/

编辑：更新了小提琴和代码

浏览输入中的Div列表

1 个答案: