Question

我已经在stackoverflow用户的帮助下创建了一个下拉菜单来自w3schools的LINK HERE。

<script>
function showHint(str)
{
if (str.length==0)
  { 
  document.getElementById("txtHint").innerHTML="";
  return;
  }
if (window.XMLHttpRequest)
  {// code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
   }
else
  {// code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
xmlhttp.onreadystatechange=function()
   {
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
    document.getElementById("txtHint").innerHTML=xmlhttp.responseText;
    }
  }
xmlhttp.open("GET","gethint.php?q="+str,true);
xmlhttp.send();
}
</script>

但是，我在实现此代码时遇到问题，以便包含一个能够在不使用鼠标的情况下选择用户的功能（即按键和按键）。我试图从stackoverflow上的另一个线程实现以下示例：LINK HERE和FIDDLE HERE，但无济于事。

 var active = document.querySelector(".hover") ||         document.querySelector(".dropdownItemContainer li");

document.addEventListener("keydown",handler);
document.addEventListener("mouseover",handler);

function handler(e){
console.log(e.which);
    active.classList.remove("hover");
if (e.which == 40){
    active = active.nextElementSibling || active;
}else if (e.which == 38){      
    active = active.previousElementSibling || active;
}else{
    active = e.target;
}
    active.classList.add("hover");
}

取决于我将代码放在我的javascript表单中的位置，它根本不起作用，或者当按下向下键时，它会自动跳回到顶部选择。如果我按住向下键，它会快速筛选所有选项，直到它到达底部，然后再次向后弹回到顶部选择。

通过在每个向上键和向下键之间实施警报，结果有效。因此，有些事情是相互矛盾的。

有没有人有关于如何消除这种冲突的线索？或者能够克服这个？

我对jquery不感兴趣，欢迎任何可能有帮助的帮助或其他链接。

带有悬停和上下键选择的下拉菜单 - 冲突代码

0 个答案: