复选框按钮焦点答案

【问题标题】：Checkbox to button focus复选框按钮焦点
【发布时间】：2016-08-15 03:38:45
【问题描述】：

我的页面上有多个表单。在一种形式中，我有 3 个文本字段一个复选框和一个按钮。当按下 tab 键时，它会转到 3 个文本字段，然后转到复选框，然后就没有了。

如何将按钮 (submit) 放在复选框 (maths) 之后，然后返回到第一个文本字段 (user_id)。

<form id="form13">
User ID :<input type="text" id="user_id" /><br>
Password:  <input type="password" id="password" /><br>
Department:  <input type="text" id="department" /><br>
<input type="checkbox" id="maths" value="on"> Maths
<input type="submit" id="submit" value="Submit" />
</form>

     $('#maths').keydown(function(e){
        if (e.which  == 9){
            $('#submit).focus();
        }
      });

【问题讨论】：

那么，您想实际处理制表符吗？
您是否尝试过将tabindex 明确设置为您希望字段和按钮聚焦的顺序？ w3schools.com/tags/att_global_tabindex.asp
@hmd 谢谢。是的。

标签： javascript jquery

【解决方案1】：

如果您需要在 HTML 表单中处理 Tabbing。那么你可能需要用HTML attribute tabindex this is a good article for learning purpose来处理这个问题：

<input id="foo" tabindex="1"  />
<input id="bar" tabindex="3"  />
<input id="awesome" tabindex="2"  />

因此，您可以按照自己的方式处理它。是的，您还可以使用 Javascript 动态更改它：

document.getElementById("foo").tabIndex = "3";

希望对你有帮助。

【讨论】：

谢谢。我必须在每个表单中发送 tabindex 吗？
这取决于您的要求，如果您想在每个表单中设置索引，您可以这样做。还有另一种类型的tabindex，使用它称为Global Tabindex，它可以让您在整个网页this is a good article on tabindex for learning purpose 中设置标签索引。

【解决方案2】：

您应该以只能使用键盘进行导航的方式组织表单。例如，看看这个表格： Accessible Signup form

手动设置 tabindex 可能会导致问题行为。有几篇好文章为什么你不应该这样做：

请注意，按照建议手动设置选项卡索引时，这将影响选项卡索引在表单和文档中的自然流动。仅当您完全确定时才使用它。

你可以组织你的表单，这样你的表单的键盘导航就可以在没有你使用 tabindex 的情况下工作。

看看下面的笔：Form field focus，你会看到从复选框，焦点直接转到提交按钮并返回：

<form id="form13">
  <label for="asdfg-user_id" id="user_id-ariaLabel">
User ID: <input type="text" id="asdfg-user_id" />
  </label>
  <br>
  <label for="password" id="password-ariaLabel">
Password:  <input type="password" id="password" />
  </label>
  <br>
<label for="password" id="password-ariaLabel">  
Department:  <input type="text" id="department" />
  </label> 
  <br>
  <fieldset id="interestInfo">
        <legend>Subject </legend>
        <div>
            <div id="interests"></div>
            <div>
                <div class="row">
                    <input id="chk_Subject_1_lbl" name="chk_Subject[]"
                           type="checkbox"
                           value="on"/>
                    <span>
                        <label for="chk_Subject_1" id="AreaOfInterest_1-ariaLabel" >Math</label>
                    </span>
                </div>
              <div class="row">
                    <input id="chk_Subject_2_lbl" name="chk_Subject[]"
                           type="checkbox"
                           value="on"/>
                    <span>
                        <label for="chk_Subject_2" id="AreaOfInterest_2-ariaLabel" >Chemistry</label>
                    </span>
                </div>
            </div>
        </div>
    </fieldset>
<input type="submit" id="submit" value="Submit" />
</form>

【讨论】：