Question

大家好，我有几个简单的html表格，我为妈妈做的，所以她可以记录她的房子的状况，但最近她的骨质疏松症使她很难用鼠标。

她问我是否有办法为表单添加功能，以便她只需使用箭头键从一个输入框移动到下一个输入框，然后从下拉框中选择。

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

这些表格并不是什么特别的即将开始我在大学的第二年和我覆盖html 6个月所以我的知识是有限的。这是我为她制作的表格的链接，这样你就可以了解我的意思。

my form website＆＃34;它适合移动设备，但我已经制作了更好的网站，使用JS重定向到移动css并使用元标记，再次这个是基本的＆＃34;

有人可以告诉我如何通过表格来完成这件事：）。

非常感谢edd

Answer 1

Tab密钥使用tabindex HTML属性执行此操作。如果您想通过绑定箭头键的事件并在要在其间切换的每个元素上放置arrow-togglable类，也可以模仿此箭头按下：

＆＃13;

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

＆＃13;

input { margin: 5px 0; }

＆＃13;

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

＆＃13;

Answer 2

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

从中间元素开始，使用 TAB 和 SHIFT + TAB 查看其工作原理：

＆＃13;

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

＆＃13;

Answer 3

谢谢你尼克完美地工作:)，javascript是不可以接受的，我没有使用currentindex所以我会更多地了解它，再次感谢尼克。

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

3 个答案: