Question

我有自动填充代码，在用户在文本字段中输入3个字符或更多字符后显示包含匹配项的弹出窗口。标准的东西。

弹出窗口只是一个div，其中有一个包含匹配项的列表，例如

<div id="popup">
  <ul>
    <li><a href="/link1">Link 1</a></li>
    <li><a href="/link2">Link 2</a></li>
  </ul>
</div>

问题是，如何才能使用户在文本输入字段中按下tab键时，它会跳转到<li>元素列表中的第一个？

这可能吗？

我尝试在tabindex元素上设置<li>，但这没有效果。

我使用的是vanilla javascript，而不是JQuery

Answer 1

您可以使用程式化的表单元素来完成该操作而无需编写脚本。

Answer 2

我认为您可以在输入表单中查找按键事件，如果用户按Tab键，则将焦点设置在第一个结果上并防止默认行为。进一步的标签可以正常工作。

这样的事情：

function maybeTab(e) {
  if (e.keyCode == 9) {
    // it was tab
    document.querySelector("#popup ul li:first-child a").focus();
    return false;
  } else {
    // it wasnt tab
    return true;
  }
}

#popup {
  border: 1px solid #00a;
}
a:active, a:focus {
  background-color: #ff0;
}

<input type="text" name="search" id="search" onkeypress="return maybeTab(event);">
<a href="/linkB">Link InBetween</a>
<div id="popup">
  <ul>
    <li><a href="/link1">Link 1</a></li>
    <li><a href="/link2">Link 2</a></li>
  </ul>
</div>

用于覆盖div的标签

2 个答案: