Question

我想知道你是否可以将焦点发送给动态的li。这就是我要做的事情：

我有一个搜索框，它有一个绑定到它的键盘功能，搜索人物的名字。结果显示在搜索框正下方的div中，结果为ul。如果有人按下向下箭头按钮，焦点会切换到ul的第一个元素，我希望能够使用它。有点像下拉工作的方式。这是代码（我没有放入所有的CSS，因此它看起来并不像它应该的那样漂亮 - 只是FYI）

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

我尝试了$（＆＃39;＃search_results＆＃39;）。find（＆＃39; li：first＆＃39;）。focus（），$（＆＃39;＃search_results＆＃39;）。找到（＆＃39;利：先＆＃39）的触发器（＆＃39;聚焦＆＃39）。什么都行不通。有人有任何反馈吗？

Answer 1

你需要玩CSS＆amp;这里有些jquery。这是你的小提琴。 https://jsfiddle.net/7h0pavzb/需要添加一个类来表明它已被选中。

你的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; }

这是上下箭头键的另一个小提琴。 https://jsfiddle.net/7h0pavzb/1/

Answer 2

参阅jQuery's .focus()文档

焦点事件在获得焦点时发送到元素。这个事件隐含地适用于有限的一组元素，例如形式元素（<input>，<select>等）和链接（<a href>）。在最近的浏览器版本，该事件可以扩展到包括所有元素类型通过显式设置元素的tabindex属性。元素可以通过键盘命令获得焦点，例如Tab键，或者通过鼠标点击元素。

只需在tabindex="10"代码中添加<li>属性即可集中精力。或者您也可以将LI的内容包装到<a href="#"></a>中，因为链接是可聚焦的元素。

实现这一结果的另一种方法是简单地将一个类添加到你的＆＃34;聚焦＆＃34; <li>代码。

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

3 个答案: