兩種表格之間的tabindex不起作用

Question

我有兩種形式。第一種形式search和insert。

但在按下搜索表單中的按鈕後，tabindex不會轉到插入表單中的第一個輸入。

請注意，在搜索表單中存在一個隱藏的div滑塊切換按鈕，下一個選項卡將在該按鈕後面。

<form id="searchform" name="searchform" method="get" role="form" tabindex="1"> 
     <table> 
      <tr> 
       <td colspan="6"> &nbsp; </td> 
      </tr> 
      <tr> 
       <td><input tabindex="1" id="name" placeholder="name" name="name" type="text"></td> 
       <td><input tabindex="2" id="company" placeholder="company" name="company" type="text"></td> 
       <td><input tabindex="3" id="persona" placeholder="persona" name="persona" type="text"></td> 
       <td><input tabindex="4" id="website" placeholder="website" name="website" type="text"></td> 
       <td> <a href="#" tabindex="5" class="btn btn-positive" id="searchlead"> Search </a></td> 
       <td> <a style="margin-right: 6px;" href="#" tabindex="6" class="btn btn-info" id="insert"> Insert </a></td> 
      </tr> 
      <tr class="slideTogglerow" style="display: none;"> 
       <td><div> 
        From my list <input type="checkbox" name="search_own_list" style="margin: 8px;" id="search-own-list"/> 
        </div> 
       </td> 
       <td> <input type="text" name="date_inserted" placeholder="date" id="date_inserted"/></td> 
      </tr> 
      <tr> 
       <td> 
        <a id="advancesearch" href="#"> 
        Advanced Search 
        <img src="assets/img/add-button.png"/> 
        </a> 
       </td> 
       <td colspan="5"> </td> 
      </tr> 
     </table> 
    </form> 




<form id="insertform" name="insertform" method="get" role="form" tabindex="2"> 
     <div class="row"> 
       <p> Date: <i><?php echo date("M j, Y g:i a");?> </i></p> 
       <div id="major-fields"> 
        <input type="text" tabindex="7" placeholder="First Name" name="fname" id="ifname"> 
        <input type="text" tabindex="8" placeholder="Last Name" name="lname" id="ilname"> 
        <input type="text" tabindex="9" placeholder="Company" name="company" id="icompany"> 
       </div> 
       <label>Persona <br/> 
       <?php echo $persona_str;?> 
       </label> 
       <br/> 
       <label>Campaign <br/> 
       <select id="icampaign" name="campaign"> 
        <option value="3">NorthAm</option> 
        <option value="1">APAC</option> 
        <option value="2">Canada</option> 
        <option value="4">UK</option> 
       </select> 
       </label> 
       <br/> 
       <label>Country <br/> 
       <select id="icountry" name="country"> 
        <option value="2">USA</option> 
       </select> 
       </label> 
       <br/> 
       <label>Industry <br/> 
       <?php echo $industry_str;?> 
       </label> 
       <br/> 
       <label> 
       Status <br/> 
       <?php echo $status_str;?> 
       </label> 
       <br/> 
     </div> 
     <button id="slideToggle" type="button" class="btn btn-default">+ Add more information </button> 
     <br /> 
     <div class="row slideTogglebox" style="display: none;"> 
     <div id="minor-fields"> 
      <input type="text" placeholder="website" name="website" id="iwebsite"> 
      <input type="text" placeholder="email" name="email" id="iemail"> 
     </div> 
     <input type="text" placeholder="position" name="position" id="iposition"> 
     <input type="text" placeholder="phone" name="phone" id="iphone"> 
     <input type="text" placeholder="address" name="address" id="iaddress"> 
     <textarea placeholder="note" name="note" id="inote"></textarea> 
     </div> 
     <button type="button" class="btn btn-positive" id="insertlead" style="margin-top: 10px; width: 100%;"> INSERT </button> 
    </form> 

Answer 1

點擊「搜索」鏈接（這是一個鏈接，即使你可能格式化它看起來像一個按鈕）只專注不會引起重點要改變。它只是移動到文檔的開始處（因爲它有href="#"）。由於沒有重點改變，該鏈接保持專注。按下TAB鍵將導致焦點改變到下一個可調焦元素（「插入」鏈接）。

如果你想作一個鏈接的點擊影響的重點，你需要做的是使用JavaScript：

<a href="#" tabindex="5" class="btn btn-positive" id="searchlead" 
    onclick="document.getElementById('insert').focus()"> Search </a></td> 

你可能有一些onclick處理程序在你的實際代碼的鏈接。如何將聚焦與現有代碼結合在一起取決於它應該做什麼，但通常你會執行一些搜索操作，然後進行聚焦，然後例如return false以防止正常的鏈接處理。

Answer 2

如果你願意，你可以使用jQuery

$('#insertform input').first().focus();