如何更改使用制表键时的文本字段选择顺序

Question

我仍在试图思考如何重新标记此标题。

不管怎么说，所以我有这样的联系表格我的页面在这里：http://leongaban.com/

当你的名字点击并填写您就可以标签下一个域的电子邮件。输入电子邮件后，用户很自然地再次进入消息框。

但是，由于某种原因，我的选项卡选择一直跳到页面顶部，似乎选择我的投资组合主导航链接。还有几个标签，我回到了textarea的消息。

这当然是不理想的，有没有一种方法我可以强制选项卡按正确的顺序？即：名称>电子邮件>邮件>验证码>提交

我目前的形式（HTML）

<div class="the-form"> 
      <form id="myForm" action="#" method="post"> 

      <div> 
       <label for="name">Your Name</label> 
       <input type="text" name="name" id="name" value="" tabindex="1"> 
      </div> 

      <div> 
       <label for="email">Your Email</label> 
       <input type="text" name="email" id="email" value="" tabindex="1"> 
      </div> 

      <div> 
       <label for="textarea">Message:</label> 
      </div> 

      <div> 
       <textarea cols="40" rows="8" name="message" id="message"></textarea> 
      </div> 

      <p><em>Hi, what is 2 + 3?</em></p> 
      <input type="text" name="captcha" id="captcha" /> 

      <div> 
       <input class="submit-button" type="submit" value="Submit"> 
      </div> 

      </form> 
     </div> 

    </footer> 

Answer 1

您必须按照您想要的顺序编号您的tabindex。

<input type="text" name="name" id="name" value="" tabindex="1"> 
<input type="text" name="email" id="email" value="" tabindex="2"> 
<textarea cols="40" rows="8" name="message" id="message" tabindex="3"></textarea> 
<input type="text" name="captcha" id="captcha" tabindex="4"/> 
<input class="submit-button" type="submit" value="Submit" tabindex="5"> 

等

现在你有两个tabindex ES设置为1，所以他们会先走，因为他们是唯一的一个定义的tabindex。

Answer 2

尝试利用tabindex属性的输入字段。这可以让你控制用户可以通过你的页面元素进行标签的顺序。

此示例代码可以找到here，但您已经在名称和电子邮件输入上设置了tabindex。只需将该属性添加到其他输入中，并按照您想要的顺序进行设置即可。