通过键盘导航无序列表 - JQuery答案

【问题标题】：Navigating an unordered list by keyboard - JQuery通过键盘导航无序列表 - JQuery
【发布时间】：2013-04-29 11:00:32
【问题描述】：

我有一个无序列表，可以使用 sortable 插件重新排序。

由于它不提供键盘支持，我已经开始为此添加一个自定义功能，从能够通过向上/向下箭头键在列表中导航开始。

在添加 tabindex 的情况下，通过选项卡可以正常工作，但是使用向上/向下箭头会导致在多个列表项之间跳转。

我已经设置了一些测试边框颜色，并且可以看到没有正确选择上一个和下一个项目。

您可以进入下一页的列表并尝试使用箭头键...

http://jsfiddle.net/qYvNq/

$(document).ready(function(){

  $("ul#sortable").sortable();

    $("ul#sortable li").focus(function() {

        $(this).css("border-color","red");

        $previtem = $(this).prev('li');
        $previtem.css("border-color","aqua");

        $nextitem = $(this).next('li');
        $nextitem.css("border-color","lime");

        $(this).keydown(function(e){
            if (e.keyCode == 40) { /* Focus Down */
                $nextitem.focus();
                return false;
            } else if (e.keyCode == 38) { /* Focus Up */
                $previtem.focus();
                return false;
            }
        });

    });

});

【问题讨论】：

你的意思是这样的？ jsfiddle.net/qYvNq/2 ?应该给你一个想法。

标签： jquery keyboard jquery-ui-sortable

【解决方案1】：

您必须像这样将 keydown 块移出焦点块：

$(document).ready(function(){
    var $previtem,
        $nextitem;

    $("ul#sortable").sortable();

    $("ul#sortable li").focus(function() {

        $(this).css("border-color","red");  

        $previtem = $(this).prev('li');
        $previtem.css("border-color","aqua");

        $nextitem = $(this).next('li');
        $nextitem.css("border-color","lime");
    });

    $("ul#sortable").keydown(function(e){
        if (e.keyCode == 40) { /* Focus Down */
            $nextitem.focus();
            return false;
        } else if (e.keyCode == 38) { /* Focus Up */
            $previtem.focus();
            return false;
        }
    });     
});

当然，在拖动列表项后，您必须确保重置上一个和下一个项目，因为顺序会有所不同。

【讨论】：

非常感谢 - 将焦点和按键分开解决了这个问题。我实现了您的更改并添加了使用键盘重新排序的功能。一切都很好。

【解决方案2】：

这个干净的键盘导航工作代码：如下

$(document).ready(function(e) {
    $('.suggest_div').hide();
    $(document).keydown(function(e) {
         if (e.keyCode == 38) { // up
            var selected = $(".selected");
            $(".suggest_container li").removeClass("selected");
            if (selected.prev().length == 0) {
                $(".suggest_container li").siblings().last().addClass("selected").children('a').focus();
            } else {
                selected.prev().addClass("selected").children('a').focus();
            }
        }

        if (e.keyCode == 40) { // down
            var selected = $(".selected");
            $(".suggest_container li").removeClass("selected");
            if (selected.next().length == 0) {
                $(".suggest_container li").siblings().first().addClass("selected").children('a').focus();
            } else {
                selected.next().addClass("selected").children('a').focus();
            }
        }

        if(e.keyCode == 13){ //Enter
            $("#suggest_input").val($('.selected a').attr('username'));
            $(".suggest_div").hide();
        }
    }); 
});

以下建议容器是在 ajax 中完成的... 代码如下：

function auto_suggest_trigger(){
    var suggest_input = $('#suggest_input').val();

    if(suggest_input != ""){
        $.ajax({ 
            url:'autosuggest_parser.php?query='+suggest_input,
            cache:false,
            success: function(result){
                $('.suggest_div').show();
                $('.suggest_div').html(result);
            }
        });
    }else{
        $('.suggest_div').hide();
    }
}

这是表单方法..

<form method="post" name="autosuggest">
<label>Type Here :</label>  <input type="text" name="suggest_input" class="text_input" id="suggest_input"  onkeyup="auto_suggest_trigger()" onkeypress="auto_suggest_trigger()"placeholder="Type in here..."/>
</form>

现在您可以编写 php 或任何其他代码在 ajax 中发布文件。如果我在 php 中返回。

由 Shaikh Arbaaz 编码。

【讨论】：