0

我有一个无序列表，可以使用 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;
            }
        });

    });

});
4

2 回答 2

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

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

于 2013-05-05T15:51:35.270 回答
1

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

$(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 编码。

于 2015-05-26T12:20:12.033 回答