我需要能够使用箭头键选择<a>
标记,并使用回车键访问该链接。我的实现非常接近,但经过一些调试后,我似乎无法理解出了什么问题。相关代码如下:
var resultId = 0;
$("#search-input").keydown(function(e) {
var resultIdSelection = "#result-" + resultId;
var key = e.which;
if (key == "38") {
if (resultId > 1) {
e.preventDefault();
console.log(resultIdSelection)
resultId--;
$(resultIdSelection + " .item-link").focus();
}
}
if (key == "40") {
if (resultId < 5) {
e.preventDefault();
console.log(resultIdSelection)
resultId++;
$(resultIdSelection + " .item-link").focus();
}
}
});
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<input id="search-input">
<ul>
<li id="result-0"><a class="item-link" href="#">Item</li>
<li id="result-1"><a class="item-link" href="#">Item</li>
<li id="result-2"><a class="item-link" href="#">Item</li>
<li id="result-3"><a class="item-link" href="#">Item</li>
<li id="result-4"><a class="item-link" href="#">Item</li>
<li id="result-5"><a class="item-link" href="#">Item</li>
</ul>
&#13;
所以预期的行为是当我按下向下键时,它将焦点向下移动一个元素,如果向上键被击中则向上移动。它也不应超过列表项的最大数量,即6。
然而,正在发生的是,每按一次箭头按键,它只进行一次焦点。我需要再次单击输入然后再按下向下键以转到下一个项目。
我不是100%肯定,但我认为我需要以某种方式弄清楚如何重置&#34;关注每个箭头键。我也认为这可能与这里处理e.preventDefault()
的方式有关,但我在keyCode条件中有这个。
根据提供的代码,如何才能最好地多次触发.focus()
事件?
答案 0 :(得分:2)
问题是,只有焦点在输入元素上时,keydown
侦听器才会触发。因此,一旦用户按下向上或向下箭头一次,焦点就会从输入元素移开,并且听众不再会发射。
将侦听器添加到整个文档(或容器元素或每个锚标记)将解决该问题。请参阅下面的工作解决方案。
更新:修正了正确应用上下箭头按下的代码并在正确的时间更改目标ID的代码。
var resultId = 0;
$(document).keydown(function(e) {
var resultIdSelection;
var key = e.which;
if (key == "38") {
if (resultId > 0) {
e.preventDefault();
resultId--;
resultIdSelection = "#result-" + resultId;
console.log(resultIdSelection)
$(resultIdSelection + " .item-link").focus();
}
}
if (key == "40") {
if (resultId < 5) {
e.preventDefault();
resultId++;
resultIdSelection = "#result-" + resultId;
console.log(resultIdSelection)
$(resultIdSelection + " .item-link").focus();
}
}
});
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<input id="search-input">
<ul>
<li id="result-0"><a class="item-link" href="#">Item</li>
<li id="result-1"><a class="item-link" href="#">Item</li>
<li id="result-2"><a class="item-link" href="#">Item</li>
<li id="result-3"><a class="item-link" href="#">Item</li>
<li id="result-4"><a class="item-link" href="#">Item</li>
<li id="result-5"><a class="item-link" href="#">Item</li>
</ul>
&#13;