Кнопка «Отправить» не фокусируется, хотя tabindex настроен правильно - PullRequest
Новая
       6

Кнопка «Отправить» не фокусируется, хотя tabindex настроен правильно

10 голосов
/ 25 февраля 2010

Я определил индекс табуляции для полей ввода в форме. При переходе по полям ввода кнопка отправки никогда не получает фокус, а другие поля ввода в другой форме на странице получают фокус. Все они имеют индексы табуляции выше 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;
}

Ответы [ 4 ]

11 голосов
/ 19 мая 2010

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

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

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

9 голосов
/ 24 сентября 2010

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

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

4 голосов
/ 26 февраля 2010

Хорошо, посмотрим. Я пробовал вышеуказанный код в 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.
  • Для всех, когда элемент внутри формы имеет фокус, можно просто нажать клавишу ввода, чтобы «нажать» кнопку отправки.

Полагаю, вывод должен быть таким:

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

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

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

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

0 голосов
/ 25 февраля 2010

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

...