时间戳

首页 > 解决方案 > 视觉上从一个 html 元素移动到另一个 - Javascript

javascript - 视觉上从一个 html 元素移动到另一个 - Javascript

问题描述

出于上下文考虑，这是一项学校工作，我在输入字段中输入文本，并从数据库中获取选项，这些选项建议与用户编写的字母相同的项目。它附有简单的名称数据库。

我收到 AJAX 响应并将其转换为名称数组。我在搜索字段下方有 ul 元素，并且名称来自我在此 ul 列表中填充为 li 项的响应。这一切都有效。我需要的是按向上/向下箭头键从输入字段移动到这些列表项时的功能。

在我第一次尝试时，我选择制作 datalist 而不是 ul 并用选项元素填充 datalist，这很好，因为我可以从输入转移到 datalist 选项。然而，再往前走，我需要将事件侦听器附加到不可能的选项。因此，我然后去了 ul / li 版本。我似乎无法弄清楚如何从输入元素切换到 li 项目。

我尝试过的：

我在输入字段上有 eventlistener keydown 来检查是否按下了 DownArrow。这行得通。然后我尝试了以下（名称是ul的id）。

let list = document.getElementById('names');
list.firstChild.focus();
list.firstChild.select();

在这里，我收到“list.firstChild.select 不是函数”的错误并且我卡住了。

链接到当前版本

标签： javascripthtml-lists

解决方案

判断您的代码，您收到错误的原因list.firstChild.select is not a function是因为您尝试在focus()没有它的元素上使用该方法。基本上，您可以在元素上使用它<input />，但它不适用于<li>项目。

根据DOM level 2，只有以下 Elements 有focus方法：

  • HTML输入元素
  • HTML选择元素
  • HTMLTextAreaElement
  • HTMLAnchorElement
  • HTML区域元素

推荐阅读