如何更改使用製表鍵時的文本字段選擇順序

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。只需將該屬性添加到其他輸入中，並按照您想要的順序進行設置即可。