Question

我尝试制作类似Dos的菜单。我有使用箭头键悬停元素的事件。如何制作＆＃34;输入＆＃34;执行所以转到另一个HTML文档？那么一般如何使这个工作像在DOS中一样？ ;）

这是html，js和css：

＆＃13;

var active = document.querySelector(".hover") || document.querySelector(".hoverlist li");

    document.addEventListener("keydown",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");
    }

＆＃13;

input.button {
  border: 0;
  background: none;
  width: 100%;
  text-align: left;
  font-size: 1.5em;
  color: white;
}

.hoverlist {
  list-style-type: none;
}

.hoverlist li.hover {
  background-color: #00CECD;
  color: black;
}

body {
background-color: blue;
}

＆＃13;

<ul class = "hoverlist">
                    <li class = "hover"><form action="index.html">
                        <input class= "button"    type="submit" value="/home       | 24 kb | 20.09.17" /></li>
                    <li><form action="about.html">
                        <input class= "button" type="submit" value="/about me   | 24 kb | 20.09.17" /></li>
                    <li><form action="projects.html">
                        <input class= "button" type="submit" value="/projects   | 24 kb | 20.09.17" /></li>
                    <li><form action="experience.html">
                        <input class= "button" type="submit" value="/experience | 24 kb | 20.09.17" /></li>
                    <li><form action="projects.html">
                        <input class= "button" type="submit" value="/contact me | 24 kb | 20.09.17" /></li>
                </ul>

＆＃13;

Answer 1

当用户悬停元素时，您可以运行.submit（）。

   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");
    }

当用户按Enter键时，只需使用document.querySelector(".form").submit()。

Answer 2

我会在这里扩展史蒂文的答案，指出你遇到的一些问题：

始终将事件附加到与其相关的最小元素，而不是整个文档。
您可能不希望在悬停时重定向，因为一旦页面加载，您可能会错误地触发悬停事件并重定向。
您还没有关闭表单吗？

我在下面修改了您想要的代码，除了hover您没有提交，而是正确设置了活动。您当然可以在e.target.parentNode上运行提交，而不是设置active元素，但我认为这种行为更直观。

＆＃13;

var active = document.querySelector(".hover") || document.querySelector(".hoverlist li");

    var lis = document.getElementsByTagName("li");
    var len = lis.length;
    for (var i=0; i < len; i++) {
        lis[i].addEventListener("mouseover",function(e) {
          active.classList.remove("hover");
          active=e.target.parentNode.parentNode;
          active.classList.add("hover");
          e.target.parentNode.submit()
        });
    }
    document.addEventListener("keydown", function (e){
        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");
   });

＆＃13;

input.button {
  border: 0;
  background: none;
  width: 100%;
  text-align: left;
  font-size: 1.5em;
  color: white;
}

.hoverlist {
  list-style-type: none;
}

.hover {
  background-color: #00CECD;
  color: black;
}

body {
  background-color: blue;
}

＆＃13;

<ul class = "hoverlist">
                    <li class='hover'><form action="index.html">
                        <input class= "button"    type="submit" value="/home       | 24 kb | 20.09.17" /></form></li>
                    <li><form action="about.html">
                        <input class= "button" type="submit" value="/about me   | 24 kb | 20.09.17" /></form></li>
                    <li><form action="projects.html">
                        <input class= "button" type="submit" value="/projects   | 24 kb | 20.09.17" /></form></li>
                    <li><form action="experience.html">
                        <input class= "button" type="submit" value="/experience | 24 kb | 20.09.17" /></form></li>
                    <li><form action="projects.html">
                        <input class= "button" type="submit" value="/contact me | 24 kb | 20.09.17" /></form></li>
                </ul>

＆＃13;

Answer 3

使用箭头键，您将对焦列表项。也许如果您尝试将按钮集中在里面，那么输入将提交表单... 所以也许在你的处理程序结束时尝试这样的东西？

active.querySelector('.button').focus();

如何制作＆＃34;输入＆＃34;在js中悬停时按钮执行？

3 个答案: