复选框按钮焦点

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

来源

2016-04-21 Becky

所以，你要真正处理Tab键？ – hmd

你有没有试过明确地设置'tabindex'到你想要的字段的顺序，然后按钮来关注？ http://www.w3schools.com/tags/att_global_tabindex.asp –

@hmd谢谢。是。 – Becky

如果您的需要是处理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";

我希望它可以帮助你。

来源

2016-04-21 18:54:06 hmd

谢谢。我必须在每个表单中发送tabindex吗？ – Becky

这取决于你的要求，如果你想在每个表单中设置索引，你可以这样做。还有另一种类型的'tabindex'，它被称为'Global Tabindex'，它可以让你在整个网页上设置你的Tab索引[这是一个很好的学习tabindex文章]（http：// www.htmlgoodies.com/tutors/forms/article.php/3479201）。 – hmd

您应该按照可以使用键盘只能浏览的方式来组织表单。例如，查看此表单： 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>

来源

2016-04-21 19:43:25 Ravish

复选框按钮焦点

回答

相关问题