原生JS实现输入框与显示列表项的上下箭头焦点切换

完整实现代码 #

HTML

<input id="myinput" type="text">

<ul id="mylist">
    <li class="hide"><a href="#">Link 1</a></li>
    <li class="display"><a href="#">Link 2</a></li>
    <li class="hide"><a href="#">Link 3</a></li>
    <li class="display"><a href="#">Link 4</a></li>
    <li class="display"><a href="#">Link 5</a></li>
</ul>

CSS

.display {
  display: block;
}
.hide {
  display: none;
}

JavaScript

const input = document.getElementById('myinput');
const list = document.getElementById('mylist');

// 动态获取所有处于显示状态的列表项链接
const getVisibleLinks = () => {
  return Array.from(list.querySelectorAll('li.display a'));
};

// 输入框按键事件处理
input.addEventListener('keydown', (e) => {
  const visibleLinks = getVisibleLinks();
  if (e.key === 'ArrowDown') {
    e.preventDefault();
    visibleLinks.length > 0 && visibleLinks[0].focus();
  } else if (e.key === 'ArrowUp') {
    e.preventDefault();
  }
});

// 列表链接按键事件处理（事件委托）
document.addEventListener('keydown', (e) => {
  if (!e.target.matches('#mylist li.display a')) return;
  
  const visibleLinks = getVisibleLinks();
  const currentIndex = visibleLinks.indexOf(e.target);
  
  if (e.key === 'ArrowDown') {
    e.preventDefault();
    const nextIndex = currentIndex + 1;
    nextIndex >= visibleLinks.length ? input.focus() : visibleLinks[nextIndex].focus();
  } else if (e.key === 'ArrowUp') {
    e.preventDefault();
    const prevIndex = currentIndex - 1;
    prevIndex < 0 ? input.focus() : visibleLinks[prevIndex].focus();
  }
});

核心逻辑说明 #

• 动态筛选可见链接：通过getVisibleLinks函数实时获取带有display类的列表项内的链接，确保只对可见元素进行焦点操作。
• 输入框焦点切换：按下下箭头时，直接跳转至第一个可见链接；按上箭头则保持输入框焦点（可根据需求调整）。
• 链接间循环切换：在可见链接中按上下箭头时，自动切换到上/下一个链接；处于首尾链接时，按下对应箭头会将焦点切回输入框。
• 事件委托优化：将链接的按键事件绑定在document上，无需为每个链接单独绑定，同时支持后续动态新增的显示链接。

内容的提问来源于stack exchange，提问作者tt2022