Question

所以我有一个用于搜索的文本输入和一个通过ajax加载的建议ul列表：

    $(document).keydown(function(e) {
      var key = e.charCode ? e.charCode : e.keyCode ? e.keyCode : 0;
      if ($('#suggestion_list li').length > 0) {
        if (key == 40) {
          e.preventDefault();
          if ($('#suggestion_list li a:focus').length == 0) {
            $('#suggestion_list li a').first().focus();
          } else {
            $("#suggestion_list li a").next().focus();
          }
        }
      } else {
        $(this).focus();
      }
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input name="hsng_search_inpt" type="text" id="hsng_search_text" value="" autocomplete="off">

<ul id="suggestion_list">
  <li class="mp_search_suggest_element" item_val="item name 1">
    <a href="http://some_url1.html">
      <span>item name 1</span>
    </a>
  </li>
  <li class="mp_search_suggest_element" item_val="item name 2">
    <a href="http://some_url2.html">
      <span>item name 2</span>
    </a>
  </li>
  <li class=" mp_search_suggest_element" item_val="item name 3">
    <a href="http://some_url3.html">
      <span>item name 3</span>
    </a>
  </li>
</ul>

所以我的目标是浏览ul li元素，然后输入转到li里面的url。按下键盘上的向下箭头（代码40），我可以在列表中选择拳头a，但无法进入下一个。如何将焦点设置到下一个li>一个？感谢。

Answer 1

你无法真正设定焦点并将焦点转移到李。所以下面的代码模拟它。你可以看到它在这里工作：https://jsfiddle.net/bindrid/cmeeskpu/29/

$(document).on("keydown", function(evt){

    if(evt.keyCode == 40){

        var cs = $(".selected");
        // if none are selected, select the first on
        if(cs.length == 0){
            cs = $("#suggestion_list li:first");
            cs.addClass("selected")
           return;
        }
        // get next li. If no li rotate to  the first one again.
        var ns = cs.next("li");
        if(ns.length == 0){
            ns = $("#suggestion_list li:first");
        }
       cs.removeClass("selected");
       ns.addClass("selected");
   } 
   if(evt.keyCode == 13){
        window.location.href = $(".selected a").attr("href");
    }
})

用于模拟所选

的css类

.selected{ 
    background-color: green;
    color:white;
  }
 .selected a { color:white}

使用键盘导航ul列表元素

1 个答案: