Кнопка Submit не сфокусирована, хотя 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;
}

Ответы

Ответ 1

Это функция Mac, позволяющая вам по умолчанию указывать поля ввода и списки вкладок. Перемещение по всем элементам управления - это расширенный вариант:

http://support.mozilla.com/en-US/kb/Pressing+Tab+key+does+not+select+menus+or+buttons

Firefox на Mac копирует это поведение ОС по умолчанию.

Ответ 2

Это проблема Mac OS X. Ваш Mac может быть настроен так, чтобы не позволять вам вводить элементы нетекстового поля (например, кнопки). Вы можете изменить это, перейдя в системные настройки для клавиатуры. Затем нажмите на вкладку shorcut и посмотрите на нижнюю часть и выберите параметр, чтобы можно было сфокусироваться на всех элементах управления. Теперь вы можете сосредоточиться на кнопках Safari и Firefox в дополнение ко всем кнопкам в Mac OS.

Чтобы быстро изменить настройку на вашем Mac, нажмите CTRL + F7 (или если вы используете клавиатуру Mac, попробуйте удерживать функциональную клавишу и нажимать CTRL + F7).

Ответ 3

Хорошо, посмотрим. Я пробовал код в 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, чтобы "click" кнопка отправки.

Я предполагаю, что вывод должен быть таким:

  • Различные браузеры ведут себя по-разному. Даже тот же браузер ведет себя по-разному на разных ОС (FF).

  • Поведение формы по умолчанию заключается в том, что нажатие на ввод отправит форму, используя первую кнопку отправки в форме.

  • Я думаю, что это питти, что фокус не будет нажимать кнопку при табуляции, потому что я думаю, что довольно много пользователей ожидают сосредоточиться на элементе, прежде чем попасть в него.

Или что вы скажете...?

Ответ 4

Вам не нужно определять индексы табуляции, вы также можете отказаться от них - если вы не захотите изменить их естественный порядок, когда они будут отсортированы по их созданию. Попробуйте вытащить их полностью и посмотреть, работает ли это по своему вкусу.