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

forms html form-submit tabindex
person Nicsoft    schedule 25.02.2010    source источник
comment
Я пробовал ваш код, и он показывает, как должен. Может быть, что-то еще на вашей странице мешает правильному порядку табуляции?   -  person Select0r    schedule 25.02.2010
comment
Спасибо за Ваш ответ! Что ж, это точно не работает (с использованием Firefox). Может ли это иметь какое-то отношение к моей таблице стилей? Я обновил свой вопрос с помощью таблицы стилей. Я, например, летаю, может ли это повлиять?   -  person Nicsoft    schedule 25.02.2010

Ответы (4)


arrow_upward
15
arrow_downward

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

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

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

person Tom Wuttke    schedule 19.05.2010
comment
Также бывает в Safari. Я думаю, что это скорее Mac - а уж потом то, подчиняется ли браузер предпочтениям ОС. Переход к настройкам клавиатуры в Mavericks, а затем включение всех элементов управления в разделе Полный доступ с клавиатуры сработало для меня. - person awidgery; 14.05.2014

arrow_upward
13
arrow_downward

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

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

person Rick    schedule 24.09.2010

arrow_upward
4
arrow_downward

Ладно, давайте посмотрим. Я пробовал приведенный выше код в Firefox (Mac, Windows), Safari (Mac) и IE (Windows). Вот мои выводы:

Когда используешь

<button name="thename" type="submit">Subscribe</button>

or

<input id=\"inputsubmit\" type=\"submit\" value=\"Subscribe\">

для отправки формы (тот же результат):

  • FF (Win) - при переходе по табуляции фокус попадает на кнопку
  • FF (Mac) - при переходе по табуляции фокус не касается кнопки.
  • Safari (Mac) - при переходе по табуляции фокус не касается кнопки.
  • IE (Win) - при переходе на табуляцию кнопка кажется все время в фокусе, и кнопка будет иметь дополнительный фокус при переходе на i.
  • Для всех, когда элемент внутри формы находится в фокусе, можно просто нажать Enter, чтобы «щелкнуть» кнопку отправки.

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

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

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

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

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

person Nicsoft    schedule 26.02.2010
comment
1. Я думаю, что дело в поведении ОС, а не в браузере. Обратите внимание, что во всех браузерах версии Windows вы получаете фокус, а на Mac - нет. 2. Он не получает фокуса, но по умолчанию для формы нажимается ввод, и она отправляется с помощью первой кнопки отправки в форме. 3. Не знаю о других пользователях, но я ожидаю, что нажму кнопку «Ввод», когда закончу с формой, независимо от того, на чем сосредоточено внимание. - person casraf; 26.02.2010
comment
2. Я обновил свой ответ, чтобы отразить ваш комментарий. 3. Обычно я нажимаю на кнопку, а затем нажимаю Enter, но моя мама говорит мне, что я уникален, так что ... - person Nicsoft; 26.02.2010
comment
Ха-ха. Что ж, может быть, да;) это небольшая проблема, и, поскольку у меня нет Mac, я не могу видеть, как это происходит в реальном времени - так что я думаю, что это все, что я могу гипотетически помочь вам прямо сейчас. - person casraf; 26.02.2010
comment
Хе-хе ... Спасибо за помощь, обсуждение помогло мне понять, что можно, а что нет. - person Nicsoft; 26.02.2010

arrow_upward
0
arrow_downward

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

person casraf    schedule 25.02.2010
comment
На самом деле у меня раньше не было определенных индексов табуляции. Но так как было невозможно перейти к кнопке отправки, я подумал, что мне нужно добавить индексы табуляции. Но это все равно не помогло. Я обновил свой вопрос данными моей таблицы стилей, по крайней мере, частично ... Не знаю, имеет ли это значение? - person Nicsoft; 25.02.2010
comment
Для меня это фокусируется как в Firefox, так и в Chrome - как вы думаете, может быть, вы просто не видите его визуально? Попробуйте добавить третий стиль для #inputsubmit:focus и посмотрите, работает ли он. - person casraf; 25.02.2010
comment
Я действительно вижу, что другое поле ввода в другой форме получает фокус. Курсор мигает в этом поле ввода. Я пробовал добавить стиль #inputsubmit: focus, но он не срабатывает при переходе на табуляцию. Я тоже пробовал это на сафари, но безуспешно. Сидя на Mac, но я полагаю, это не должно иметь никакого значения ... - person Nicsoft; 26.02.2010
comment
Вы уверены, что их естественный порядок должен быть сосредоточен? Кроме того, попробуйте много работать табуляцией, пока не зациклите поля - фокусируется ли он когда-нибудь? - person casraf; 26.02.2010
comment
Нет, это никогда не будет в фокусе, по крайней мере, FF на Mac. Проверьте мой собственный ответ. Действительно ли возможно сделать это для всех браузеров как на Mac, так и на Win? - person Nicsoft; 26.02.2010
comment
@henasraf - это функция Mac. - person Andrew; 22.07.2010