Кнопка отправки не сфокусировалась даже при том, что tabindex правильно установлен
Я определил заголовок вкладки для полей ввода в форме. При переключении вкладок через поля ввода кнопка отправки никогда не получает фокус, некоторые другие поля ввода в другой форме на странице получает фокус. У этого все есть заголовки вкладки выше, чем 3. Каким образом?
<form action="subscription.php" name="subscribe" method="post" onsubmit="return isValidEmailAndEqual()">
<p id="formlabel">E-mail</p> <input type="text" name="email1" tabindex=1>
<br/>
<p id="formlabel">Repeat e-mail</p> <input type="text" name="email2" tabindex=2> <br/>
<input id="inputsubmit" type="submit" value="Subscribe" tabindex=3>
</form>
CSS:
input {
background-color : #333;
border: 1px solid #EEE;
color: #EEE;
margin-bottom: 6px;
margin-top: 4px;
padding: 1px;
width : 200px;
}
#inputsubmit {
background-color : #d7e6f1;
border: 1px solid #EEE;
color: #0000ff;
margin-bottom: 6px;
margin-top: 4px;
padding: 1px;
width : 200px;
}
#inputsubmit:hover {
cursor: pointer; cursor: hand;
background-color : #d7e6f1;
border: 1px solid #0000ff;
color: #0000ff;
margin-bottom: 6px;
margin-top: 4px;
padding: 1px;
width : 200px;
}
p#formlabel{
width: 100;
}
3 ответа
Это «функция» Mac, позволяющая по умолчанию вкладывать только поля ввода и списки мыслей. Переход по всем элементам управления является расширенным вариантом:
http://support.mozilla.com/en-US/kb/Pressing+Tab+key+does+not+select+menus+or+buttons
Firefox в Mac копирует это поведение ОС по умолчанию.
Вам не нужно определять индексы вкладок, вы можете отказаться от них - если только вы не хотите изменить естественный порядок их расположения, когда они сортируются по их созданию. Попробуйте убрать их вообще и посмотрите, будет ли это работать более удобно для вас.
Хорошо, давайте посмотрим. Я попробовал приведенный выше код в Firefox (Mac, Windows), Safari (Mac) и IE (Windows). Вот мои выводы:
При использовании
<button name="thename" type="submit">Subscribe</button>
или
<input id=\"inputsubmit\" type=\"submit\" value=\"Subscribe\">
для отправки формы (тот же результат):
- FF (Win) - При переходе по вкладкам фокус попадает на кнопку
- FF (Mac) - При переходе по вкладкам фокус не попадает на кнопку.
- Safari (Mac) - При переходе по вкладкам фокус не попадает на кнопку.
- IE (Win) - При переходе по вкладкам кнопка, похоже, постоянно находится в фокусе, а при переходе по вкладкам i кнопка будет иметь дополнительный фокус.
- Для всех, когда элемент внутри формы имеет фокус, можно просто нажать enter, чтобы "кликнуть" по кнопке submit.
Я полагаю, что вывод должен быть таким:
Разные браузеры ведут себя по-разному. Даже один и тот же браузер ведет себя по-разному на разных ОС (FF).
По умолчанию форма ведет себя так, что нажатие клавиши Enter отправляет форму, используя первую кнопку отправки в форме.
Я думаю, что очень жаль, что фокус не попадает на кнопку при переходе по вкладкам, потому что я думаю, что довольно много пользователей ожидают, что фокус будет на элементе перед нажатием кнопки Enter.
Или что вы скажете...?