使用 jQuery 将焦点发送到动态 li

Question

我想知道您是否可以将焦点发送到动态 li。这是我正在尝试做的事情：

我有一个搜索框，它绑定了一个 keyup 函数，用于搜索人名。结果显示在搜索框正下方的 div 中，其中包含 ul 个结果。我希望在有人按下向下箭头按钮时将焦点切换到 ul 的第一个元素。有点像下拉菜单的工作原理。这是代码（我没有输入所有 CSS，所以它看起来不像它应该的那样漂亮——仅供参考）

$(document).ready(function(){
  $('#search_name').keyup(function(e) {
  if(e.which == 40){
   //It does get here, and does find the li, BUT doesn't send the focus
   $('#search_results').find('li:first').focus();
   return ;
  }
        //This is the function that displays the UL in #search_results
      /*delay_call(function(){
      searchNameDept();
     }, 500 ); */
 });
});

#search{
  position: relative;
  right:0;
  margin:0 1em;
  width:350px;
}
#search{
  top:0;
  z-index:10;
}
#search_name{
  
  display:block;
  padding:10px 50px 10px 10px;
  border:0;
  margin:0;
}
#search > a{
  position: absolute;
  right:0;
  top:0;
  bottom:0;
  padding:0 10px;
  background-color: #ec9507;
}
#search > a i{
  color:#fff;
}
#search_results{
  position: absolute;
  top:100%;
  left: 0;
  right:0;
  max-height: 200px;
  overflow: auto;
}
#search_results ul{
  width: 100%;
  margin:0;
  padding:0;
}
#search_results li{
  width: 100%;
  list-style-type: none;
  box-sizing: border-box;
  margin:0;
  padding:10px 15px;
  background-color: #fff;
  border-top:1px solid #ccc;
  transition:all 0.5s;
  -moz-transition:all 0.5s;
  -webkit-transition:all 0.5s;
  cursor:pointer;
  word-wrap:break-word;
}
#search_results li:hover, #search_results li:focus{
  color:#fff;
  background-color: #27c7f4;
}
#search_results li i{
  padding-right:5px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<form action="#" method="post" class="boxy" id="search">
  <input type="text" name="search_name" id="search_name" class="boxy" value="DIRECTORY" autocomplete="off" />
  <a href="javascript:void(0)" class="center_flex">Search</a>
  <div id="search_results">
    <!-- Example content that is printed out after searchNameDept() is run -->
    <ul>
      <li class="search_org">Sally Joe</li>
    </ul>
  </div>
</form>

我试过了 $('#search_results').find('li:first').focus(), $('#search_results').find('li:first').触发器('focus')。什么都不管用。有人有任何反馈吗？

Answer 1

参考 jQuery's .focus() 文档

The focus event is sent to an element when it gains focus. This event is implicitly applicable to a limited set of elements, such as form elements (<input>, <select>, etc.) and links (<a href>). In recent browser versions, the event can be extended to include all element types by explicitly setting the element's tabindex property. An element can gain focus via keyboard commands, such as the Tab key, or by mouse clicks on the element.

因此，只需将 tabindex="10" 属性添加到您的 <li> 标签中，这样它们就可以成为焦点。或者您也可以将 LI 的内容包装到 <a href="#"></a> 中，因为链接是可聚焦的元素。

实现此结果的另一种方法是将 class 添加到 "focused" <li> 标签。

Answer 2

你只需要在这里玩 CSS 和一些 jquery。这是你的 fiddle。 https://jsfiddle.net/7h0pavzb/需要加一个class表示选中

你的jquery

$(document).ready(function(){
  $('#search_name').keyup(function(e) {
        if(e.which == 40){
            if($("#search_results li.active").length!=0) {
                var storeTarget = $('#search_results').find("li.active").next();
                $("#search_results li.active").removeClass("active");
                storeTarget.focus().addClass("active");
            }
            else {
                $('#search_results').find("li:first").focus().addClass("active");
            }
            return ;
        }
    });
});

我添加的样式是，

#search_results li.active { background:#000; color:#fff; }

这是另一个 fiddle 上下方向键。 https://jsfiddle.net/7h0pavzb/1/

Answer 3

只需尝试以下解决方案。

希望对您有所帮助。

 $('#productname').keydown(function(e) {
  var key = e.which;
  if (key == 38 || key == 40) {
var storeTarget = "";

if (e.which == 40) {
  if ($("ul#suggestion-list li.active").length != 0) {
    storeTarget = $('#ul#suggestion-list').find("li.active").next();
    $("ul#suggestion-list li.active").removeClass("active");
    storeTarget.focus().addClass("active");
  } else {
    $('ul#suggestion-list').find("li:first").focus().addClass("active");
  }
  return;
}
  }
});

<div id="addproduct">
  <table>
<tr>
  <td>Product Name:</td>
  <td>
    <input type="text" name="" id="productname" placeholder="Product Name" size="40" />
  </td>
  <td> Quantity </td>
  <td>
    <input type="text" name="quantity" id="quantity" placeholder="QTY" size="3" />
  </td>
  <td>
    <input type="button" id="add" value="Add" />
  </td>
</tr>
<tr>
  <td></td>
  <td>
    <ul id="suggestion-list"></ul>
  </td>
  <td></td>
  <td></td>
  <td></td>
</tr>
  </table>
</div>

使用 jQuery 将焦点发送到动态 li

Send focus to dynamic li with jQuery

jquery

setfocus