Об использовании focus() для текстового поля

Это удобно пользователям

Сперва о том, что же это такое. Когда вы открываете веб-страницу каталога, поисковой системы, почтовой службы, так бывает, что заботливый вебмастер размещает курсор в самом важном, на его взгляд, месте — поле ввода поискового запроса или логина. Сделать это не сложно, достаточно при загрузке страницы (событие onload) проверить наличие текстового поля input и применить к нему метод focus(). Все это делается средствами javascript. При полной уверенности, что на странице есть нужное текстовое поле, можно вообще ничего не проверять, а в коде после него написать примерно такое:


<script>
   document.forms['Search'].words.focus();
</script>

Легко догадаться, что в форме, id="Search" должно быть текстовое поле name="words", к которому применяется метод focus() и, как только скрипт выполнится, курсор будет размещён именно в нём. Всё просто, загружаете страницу и сразу что-то можете набрать с клавиатуры, например, поисковый запрос (посмотрите Ya.ru). Всё происходит быстро и удобно.

Это неудобно пользователям

А теперь я расскажу, как это бывает вредно и неудобно. Впрочем, попробуйте сами:

  1. откройте любимый браузер;
  2. если разрешение экрана у вас больше 1024х768 точек, то уменьшите окно хотя бы по высоте точек до 700;
  3. наберите в адресной строке http://www.yandex.ru или http://www.rambler.ru;
  4. а теперь самое главное: отложите в сторону мышку (условимся, что её нет) и дождитесь полной загрузки страницы;
  5. страница загрузилась, а теперь попробуйте без мышки посмотреть что-то, находящееся ниже видимой части страницы: "Котировки" на Яндексе или "Погоду" на Рамблере...

Первое, что может прийти в голову, прокрутить страницу вниз с помощью стрелки на клавиатуре (не забывайте, мышки нет, мы же договорились).
Не ожидали? Вам предложат выбрать что-нибудь из того, что вы искали ранее — поищите вот ещё раз, а чтобы добраться до курса валют или посмотреть погоду, придётся потрудиться. Подскажу, конечно: нажмите кнопку Tab, поле ввода лишится фокуса и вы сможете наконец использовать кнопки со стрелками для прокрутки и просмотра всей страницы.

Для чего это написано

На мой взгляд, использование фокуса на поле ввода оправдано не всегда. Если основная функция страницы — написание поискового запроса или авторизация для использования какого-то сервиса, а кроме формы там совсем мало информации, то в этом случае удобно будет большинству пользователей, посетителей этой страницы (Ya.ru или Google.com). Но в случае, когда вы размещаете на ней новости, информеры, список категорий каталога и прочее, не забывайте, что не у всех есть возможность для навигации использовать мышку с колесом, а также не все заходят на вашу страницу только для поиска или авторизации.

Попробуйте отказаться от мышки и почитать новости на NextMail.ru, используя для навигации только клавиатуру. А теперь почувствуйте разницу, сделайте то же самое на Mail.ru.

Конечно, можете сказать, что критиковать легче, чем предложить что-то. Предлагаю: используйте атрибут tabindex и/или accesskey. Именно они помогают сделать навигацию по ссылкам и полям формы на странице проще и удобнее, конечно при правильном их использовании. Если вы предлагаете пользователю много различной информации на странице, кроме использования какого-то одного сервиса, дайте ему возможность самому решить что и в каком порядке делать: читать или авторизоваться или искать.

Вы как думаете?



Много комментариев (18) к “Об использовании focus() для текстового поля”

  1. Michael Yakovis :

    Да, и есть еще одно обстоятельство. В Опере и Firefox часто работа со страницей начинается с поиска по ней. А поиск — это бэкслешь или точка. В случае фокуса на поле ввода происходит просто ввод этих символов в поле.


  2. AG :

    В Опере всё продумано – там при нажатии ESC фокус с активного элемента снимается. И ещё есть навигация по Shift+стрелки.


  3. Vadim :

    Спасибо, интересная фича.


  4. Elf :

    > В Опере и Firefox часто работа со страницей начинается с поиска по ней. А поиск — это бэкслешь или точка. В случае фокуса на поле ввода происходит просто ввод этих символов в поле.

    А некоторые заразы (типа гмыла) еще и слэш перехватывают. Жмешь его, а он тебя насильно в поле поиска перекидывает…


  5. lusever :

    Все очень удобно. Кто не знает про таб – пользуется мышкой. А у кого нет мышки пользуется табуляцией.


  6. Ustas :

    Поисковые системы чаще всего используют для поиска, поэтому разумно для удобства большинства пользователей сделать автофокус на поле ввода. Другое дело, что порталы типа Mail.ru – это не пойми что: и не поисковая система, и не почтовый сервис уже. Такие порталы уже ничто не спасет в плане юзабельности.


  7. Flack :

    Mail — вообще ущербный поисковик. Юзал сначало алгоритма гугла, сейчас яндекса. Как к нему вообще можно серьезно относится? :) СЗОТ.


  8. Бизон :

    PgUp и PgDown никто не отменял :).

    ИМХО действительно, те, у кого нет мышки, знают про таб. Проблема надуманная.


  9. Баранов Андрей :

    Не согласен:

    PgUp и PgDown прокручивают на целый экран, в отличие от стрелок, согласитесь, есть разница, т.к. не всегда есть необходимость в этом.

    Да, я знаю про Tab, но на него возложены свои функции, а для плавного скроллинга, при отсутствии мыши, удобнее использовать все-таки стрелки.

    Да, кстати, проверяйте факты. При фокусе в каком-нибудь текстовом поле, толку от PgUp и PgDown не больше, чем от кнопок со стрелками.


  10. Ivan Shumkov :

    Вам не стыдно давать такие вредные советы? То что вы пишете – бред.


  11. Денис Радченко :

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


  12. Ложкин :

    “А теперь я расскажу, как это бывает вредно и неудобно. Впрочем, попробуйте сами:”
    предлагаю добавить пункт “разверните монитор на 180°”

    Граждане, имеющие три руки, с большим трудом находят для себя рубашки в магазинах готовой одежды. Может быть мир заточен под решение типичных задач?


  13. lusever :

    Согласен.


  14. kost :

    К вопросу о Tab.

    Попробуйте на http://yandex.ru/ им воспользоваться.

    В Opera фокус переходит с поля ввода запроса на Submit и обратно, а на остальные ссылки — нет.


  15. Михаил Елфимов :

    Я скажу ещё одну страшную штуку. Тот же эффект получатся, если зайти на сайт с планшета (ноут без клавиатуры с тачскрином). У них обычно для скролла такие кнопочки есть… Получается та же история что и с кнопками управления курсором.
    Я из-за этого market.yandex.ru уже просто ненавижу.


  16. Kallisto :

    Трудно нажать TAB и потом ходить обычными стрелочками???

    Фишка с онфокусом очень удобна при поиске, к примеру тот же яндекс, google, сразу вводишь поиск, нет необходимости клацать мышкой по полю для ввода, особенно если привык юзать больше клаву.

    Юзаю FF, жму CTRL+T, сразу фокус на строке яндекса, ввожу ya.ru, enter, сразу фокус на строке поиска, ввел строку и все и листаешь. К мышке вообще не касаюсь.

    Отсюда можно сделать выводы, что фокус полезная вещь лишь в уместных местах как например поиск, либо же если страница чисто под форму логина (по центру логин, пароль) тоже удобно.

    Не нужно вдаваться в крайности ;)
    И потом, в яндексе хлеб не зря едят. ;)


  17. homm :

    Первое, что может прийти в голову, прокрутить страницу вниз с помощью стрелки на клавиатуре (не забывайте, мышки нет, мы же договорились).
    Не ожидали? Вам предложат выбрать что-нибудь из того, что вы искали ранее — поищите вот ещё раз, а чтобы добраться до курса валют или посмотреть погоду, придётся потрудиться. Подскажу, конечно: нажмите кнопку Tab

    Нажать Tab — было первым, что пришло мне в голову абсолютно автоматически. Есть тысяча способов покинуть текстовое поле. Проблема абсолютно надумана.

    . Предлагаю: используйте атрибут tabindex и/или accesskey. Именно они помогают сделать навигацию по ссылкам и полям формы на странице проще и удобнее.
    Если вы предлагаете пользователю много различной информации на странице, кроме использования какого-то одного сервиса, дайте ему возможность самому решить что и в каком порядке делать: читать или авторизоваться или искать.

    Что-то я не догоняю, как первое предложение согласуется со сторым. Предлагаете tabindex пользователю ставить? Или не ставить вообще, пусть сам все решает?

    Статья — ложка дегтя среди другой полезной информации на данном рессурсе.


  18. Vinnipyx :

    Чесно говоря чипуха полнейшая, всё от незнания хот кеев…
    Ну начнём с того что далеко не все сидят на таких мелких разрешения и не полнооконый браузер. Есть чудо кнопка f11, бах и фулл скрин.
    Мотать страницу вниз можно с помощью PageUP PsgeDOWN кнопок. Для набора поиска жмём ctrl+t откроется новая влкадка…



22 queries 0.215 seconds.