在 html 表单中使用箭头而不是鼠标来导航输入

Question

大家好，我为我妈妈制作了一些简单的 html 表单，以便她可以记录她的房屋状况，但最近她的骨质疏松症使她很难使用鼠标。

她问我是否有一种方法可以向我的表单添加一项功能，以便她可以使用箭头键从一个输入框移动到下一个输入框并从下拉框中进行选择。

这是否可以以简单的方式实现，或者是否相当先进？

这些表格没什么特别的，我正要开始在大学的第二年，我学习了 html 6 个月，所以我的知识有限。这是我为她制作的表格的链接，以便您了解我的意思。

我的表单网站 “它适合移动设备，但我制作了更好的网站，使用 JS 重定向到移动 CSS 并使用元标记，这也是基本的”

有人可以告诉我如何使用表格来完成此操作吗:)。

edd 非常感谢

Answer 1

该Tab键使用tabindexHTML 属性来执行此操作。如果您也愿意，可以通过绑定箭头键的事件并在arrow-togglable要在其之间切换的每个元素上放置一个类来模拟箭头按下：

    var elements = document.getElementsByClassName("arrow-togglable");
    var currentIndex = 0;

    document.onkeydown = function(e) {
      switch (e.keyCode) {
        case 38:
          currentIndex = (currentIndex == 0) ? elements.length - 1 : --currentIndex;
          elements[currentIndex].focus();
          break;
        case 40:
          currentIndex = ((currentIndex + 1) == elements.length) ? 0 : ++currentIndex;
          elements[currentIndex].focus();
          break;
      }
    };

input { margin: 5px 0; }

<input type="text" class="arrow-togglable"><br/>
<input type="text" class="arrow-togglable"><br/>
<input type="text" class="arrow-togglable">