Question

我的页面上有两个表单，每个表单中的表单元素都有tabindexes。

我遇到的问题是他们不会彼此独立行事。因此，当我在Form1中并希望选项卡到下一个元素时，它反而会切换到Form2上的第二个字段。

这是一个JSFiddle来向您展示我的意思。

这是HTML代码：

<form action="" enctype="multipart/form-data" method="post" name="form1" id="form1">
  <fieldset>
    <ol>
      <li>
        <input name="Forename" type="text" id="Forename" placeholder="Forename" tabindex="1">
      </li>
      <li>
        <input name="Surname" type="text" id="Surname" placeholder="Surname" tabindex="2">
      </li>
    </ol>
  </fieldset>
</form>
<form action="" enctype="multipart/form-data" method="post" name="form2" id="form2">
  <fieldset>
    <ol>
      <li>
        <input name="EMail" type="text" id="EMail" placeholder="EMail" tabindex="1">
      </li>
      <li>
        <input name="Password" type="password" id="Password" placeholder="Password" tabindex="2">
      </li>
    </ol>
  </fieldset>
</form>

Answer 1

Tabindex是文档范围的一部分，而不是每个表单。所以你应该用3开始第二个表格的tabindex。

Answer 2

解决方法是在所有字段上使用 tabindex =“0”，这将在标签点击上选择下一个字段 - ＆gt; w3。

Answer 3

从René的评论出发，我找到了这个解决方案，其中我对每个表单部分使用了一个乘数。在这种情况下，我使用Math.pow(10, form_index)生成此代码：

<form class='form-1'>
  <input type='text' tabindex='10' />
  <input type='text' tabindex='11' />
  <input type='text' tabindex='12' />
</form>
<form class='form-2'>
  <input type='text' tabindex='100' />
  <input type='text' tabindex='101' />
  <input type='text' tabindex='102' />
</form>
<form class='form-3'>
  <input type='text' tabindex='1000' />
  <input type='text' tabindex='1001' />
  <input type='text' tabindex='1002' />
</form>

当多个表单在一个页面上时保持tabindex独立

3 个答案: