Question

我的页面上有多个表单。在一种形式中，我有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();
        }
      });

Answer 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";

我希望它可以帮助你。

Answer 2

您应该以仅使用键盘导航的形式组织表单。例如，看看这个表单： Accessible Signup form

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

请注意，当按照建议手动设置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>

复选框按钮焦点

2 个答案: