Tabindex между двумя формами не работает
У меня есть две формы. Первая форма search а также insert,
Но после нажатия кнопки в форме поиска tabindex не переходит к первому входу в insetform.
Обратите внимание, что в поисковой форме есть скрытый переключатель слайдов, где после кнопки будет открыта следующая вкладка.
<form id="searchform" name="searchform" method="get" role="form" tabindex="1">
<table>
<tr>
<td colspan="6"> </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>
Решение
Нажатие на ссылку «Поиск» (это ссылка, даже если вы можете отформатировать ее в виде кнопки) не приводит к изменению фокуса. Он просто перемещается в начало документа (так как href="#"). Поскольку нет изменения фокуса, эта ссылка остается сфокусированной. Нажатие клавиши TAB приведет к смене фокуса на следующий фокусируемый элемент (ссылка «Вставить»).
Если вы хотите щелкнуть ссылку, чтобы повлиять на фокус, вам нужно сделать это с помощью JavaScript:
<a href="#" tabindex="5" class="btn btn-positive" id="searchlead"onclick="document.getElementById('insert').focus()"> Search </a></td>
У вас наверное есть onclick обработчик для ссылки в вашем фактическом коде. То, как вы комбинируете фокусировку с существующим кодом, зависит от того, что он должен делать, но обычно вы выполняете некоторые действия поиска, затем выполняете фокусировку, а затем, например, return false чтобы предотвратить нормальную обработку ссылки.
Другие решения
Если вы хотите, вы можете просто сосредоточиться, используя jquery
$('#insertform input').first().focus();