Фокус формы HTML по умолчанию без JavaScript


159

Можно ли установить фокус ввода по умолчанию для формы HTML без использования JavaScript, например:

<html>
  <form>
    Input 1: <input type="text" name="textbox1"/>
    <br/>
    Input 2: <input type="text" name="textbox2"/>
  </form>
</html>

Я хочу установить фокус по умолчанию на любое из текстовых полей, когда форма загружается без использования JavaScript (так как я хочу, чтобы поведение происходило, когда у пользователя отключен js).

Ответы:


293

Вы можете сделать это в HTML5, но в противном случае вы должны использовать JavaScript.

HTML5 позволяет добавлять autofocusв элемент формы, например:

<input type="text" name="myInput" autofocus />

Это работает в браузерах, которые поддерживают HTML5 (или, скорее, браузерах, которые поддерживают эту конкретную часть HTML5), но, как вы знаете, не все могут использовать его пока.


22

Что-то, о чем нужно знать ... если вы установите сфокусированный элемент формы, тогда любому, кто использует вспомогательные технологии (AT), например, программу чтения с экрана, потребуется выполнить резервное копирование, чтобы увидеть меню и любой другой контент, который находится перед сфокусированным полем.

На мой взгляд, предпочтительный метод - не устанавливать фокус на какое-либо поле, кроме пропускаемой ссылки, если она доступна. Это дает им возможность пропустить содержимое страниц или прочитать страницу сверху вниз.


Было бы неплохо добавить ссылку для пропуска, которая также визуально скрыта, но доступна через программы чтения с экрана!
Джеймс Каззетта

Мне так много нужно узнать о доступности. Спасибо за добавление этого ответа, чтобы помочь остальным из нас учиться!
Эндрю

3

Как уже говорили другие, без Javascript вы не можете гарантировать поле по умолчанию. Альтернативный вариант, который вы можете попробовать, если у вас есть несколько полей, к которым пользователь может получить доступ, использует accesskeyатрибут. По сути это будет означать, что пользователь может сразу же вернуться к любому из полей во время просмотра, что может пригодиться пользователям программ чтения с экрана и т. Д.

Статья в Википедии на эту тему весьма полезна - http://en.wikipedia.org/wiki/Access_key


0

Это невозможно без какой-либо формы сценариев. Даже домашняя страница Google требует Javascript, чтобы сфокусировать поле поиска.


1
Это. Google просто добавляет JavaScript для тех браузеров, которые не поддерживают HTML5. Что-то стоит рассмотреть в любом приложении.
mvbrakel

-8

Вы можете использовать атрибут tabindex и использовать самое низкое значение в текстовом поле по умолчанию. Проверьте здесь для поддержки браузера:

http://reference.sitepoint.com/html/object/tabindex#compatibilitysection

Сайт предполагает, что

(почти во всех других случаях, а именно в элементах управления формой и ссылках, tabindex имеет отличную поддержку)


3
Атрибут «tabindex» не дает автоматической фокусировки ни на какие элементы, даже на элементы с «tabindex = 1». Нажатие <tab> (или щелчок) необходимо, чтобы выделить первый элемент в последовательности вкладок.
Клинт Пахл
Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.