Question

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

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

通过添加tabindex可以正常显示项目，但是使用向上/向下箭头会跳过多个列表项。

我设置了一些测试边框颜色＆amp;可以看到prev＆amp;未正确选择下一个项目。

您可以在以下页面的列表中进行选项卡＆amp;尝试使用箭头键......

$(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;
            }
        });

    });

});

Answer 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;
        }
    });     
});

当然，在拖动列表项目后，您必须确保重置上一个和下一个项目，因为订单将是另一个。

Answer 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>

现在你可以在ajax中发布文件中的php或任何其他代码。我已经在php中返回了。

Shaikh Arbaaz编码。

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

2 个答案: