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

【问题标题】：using arrows instead of mouse in html form to navigate inputs在 html 表单中使用箭头而不是鼠标来导航输入
【发布时间】：2016-08-10 01:51:01
【问题描述】：

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

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

这可以以简单的方式实现还是非常先进？

这些表格并没有什么特别之处，因为我即将开始我在 uni 的第二年，我学习了 6 个月的 html，所以我的知识有限。这是我为她制作的表格的链接，这样你就明白我的意思了。

my form website“它适合手机，但我已经制作了更好的网站，使用 JS 重定向到移动 css 并使用元标记，这也是基本的”

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

非常感谢edd

【问题讨论】：

只用Tab键？
0_O 哈哈，我不知道，谢谢朋友，至少有一种简单的方法，但正如我发布的那样，我可以添加任何脚本或函数。
正如@J.Titus 所说，您始终可以使用TAB 跳转到下一个输入。您甚至可以使用SHIFT + TAB 返回。输入下拉列表时，您已经可以使用 UP 和 DOWN 键来选择值。无论如何覆盖箭头键都不是一个好主意，因为在大多数浏览器中，您可以使用它们滚动页面（水平和垂直。
处理TAB和TAB+SHIFT的Javascript示例freakyjolly.com/…

标签： html forms

【解决方案1】：

Tab 键使用tabindex HTML 属性执行此操作。如果您也想通过绑定箭头键的事件并在您想要切换的每个元素上放置 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">

【讨论】：

【解决方案2】：

要扩展我的评论 - 她可以使用 TAB 键或 SHIFT+TAB 向后退，您可以编辑表格使用tabindex 设置元素的特定顺序。

从中间元素开始，使用 TAB 和 SHIFT+TAB 看看它是如何工作的：

<label>2</label><input tabindex="2" />
<label>1</label><input tabindex="1" />
<label>3</label><input tabindex="3" />

【讨论】：

【解决方案3】：

感谢 nick 完美运行 :)，javascript 是可以理解的，我没有使用 currentindex，所以我将进一步了解它，再次感谢 Nick。

【讨论】：

这不应该是一个答案。请使用评论而不是答案