Об использовании focus() для текстового поля
23.11.2023Это удобно пользователям
Сперва о том, что же это такое. Когда вы открываете веб-страницу каталога, поисковой системы, почтовой службы, так бывает, что заботливый вебмастер размещает курсор в самом важном, на его взгляд, месте — поле ввода поискового запроса или логина. Сделать это не сложно, достаточно при загрузке страницы (событие onload) проверить наличие текстового поля input и применить к нему метод focus(). Все это делается средствами javascript. При полной уверенности, что на странице есть нужное текстовое поле, можно вообще ничего не проверять, а в коде после него написать примерно такое:
Легко догадаться, что в форме, id="Search" должно быть текстовое поле name="words", к которому применяется метод focus() и, как только скрипт выполнится, курсор будет размещён именно в нём. Всё просто, загружаете страницу и сразу что-то можете набрать с клавиатуры, например, поисковый запрос (посмотрите Ya.ru). Всё происходит быстро и удобно.
Это неудобно пользователям
А теперь я расскажу, как это бывает вредно и неудобно. Впрочем, попробуйте сами:
- откройте любимый браузер;
- если разрешение экрана у вас больше 1024х768 точек, то уменьшите окно хотя бы по высоте точек до 700;
- наберите в адресной строке http://yandex.ru или http://rambler.ru;
- а теперь самое главное: отложите в сторону мышку (условимся, что её нет) и дождитесь полной загрузки страницы;
- страница загрузилась, а теперь попробуйте без мышки посмотреть что-то, находящееся ниже видимой части страницы: "Котировки" на Яндексе или "Погоду" на Рамблере...
Первое, что может прийти в голову, прокрутить страницу вниз с помощью стрелки на клавиатуре (не забывайте, мышки нет, мы же договорились).
Не ожидали? Вам предложат выбрать что-нибудь из того, что вы искали ранее — поищите вот ещё раз, а чтобы добраться до курса валют или посмотреть погоду, придётся потрудиться. Подскажу, конечно: нажмите кнопку Tab, поле ввода лишится фокуса и вы сможете наконец использовать кнопки со стрелками для прокрутки и просмотра всей страницы.
Для чего это написано
На мой взгляд, использование фокуса на поле ввода оправдано не всегда. Если основная функция страницы — написание поискового запроса или авторизация для использования какого-то сервиса, а кроме формы там совсем мало информации, то в этом случае удобно будет большинству пользователей, посетителей этой страницы (Ya.ru или Google.com). Но в случае, когда вы размещаете на ней новости, информеры, список категорий каталога и прочее, не забывайте, что не у всех есть возможность для навигации использовать мышку с колесом, а также не все заходят на вашу страницу только для поиска или авторизации.
Попробуйте отказаться от мышки и почитать новости на NextMail.ru, используя для навигации только клавиатуру. А теперь почувствуйте разницу, сделайте то же самое на Mail.ru.
Конечно, можете сказать, что критиковать легче, чем предложить что-то. Предлагаю: используйте атрибут tabindex и/или accesskey. Именно они помогают сделать навигацию по ссылкам и полям формы на странице проще и удобнее, конечно при правильном их использовании. Если вы предлагаете пользователю много различной информации на странице, кроме использования какого-то одного сервиса, дайте ему возможность самому решить что и в каком порядке делать: читать или авторизоваться или искать.
Вы как думаете?
Да, и есть еще одно обстоятельство. В Опере и Firefox часто работа со страницей начинается с поиска по ней. А поиск — это бэкслешь или точка. В случае фокуса на поле ввода происходит просто ввод этих символов в поле.
2006-11-23 at 11:10 pm
В Опере всё продумано – там при нажатии ESC фокус с активного элемента снимается. И ещё есть навигация по Shift+стрелки.
2006-11-23 at 11:53 pm
Спасибо, интересная фича.
2006-11-24 at 2:17 am
> В Опере и Firefox часто работа со страницей начинается с поиска по ней. А поиск — это бэкслешь или точка. В случае фокуса на поле ввода происходит просто ввод этих символов в поле.
А некоторые заразы (типа гмыла) еще и слэш перехватывают. Жмешь его, а он тебя насильно в поле поиска перекидывает…
2006-11-24 at 4:14 am
Все очень удобно. Кто не знает про таб – пользуется мышкой. А у кого нет мышки пользуется табуляцией.
2006-11-24 at 11:32 am
Поисковые системы чаще всего используют для поиска, поэтому разумно для удобства большинства пользователей сделать автофокус на поле ввода. Другое дело, что порталы типа Mail.ru – это не пойми что: и не поисковая система, и не почтовый сервис уже. Такие порталы уже ничто не спасет в плане юзабельности.
2006-11-25 at 2:49 pm
Mail — вообще ущербный поисковик. Юзал сначало алгоритма гугла, сейчас яндекса. Как к нему вообще можно серьезно относится? :) СЗОТ.
2006-11-27 at 2:24 pm
PgUp и PgDown никто не отменял :).
ИМХО действительно, те, у кого нет мышки, знают про таб. Проблема надуманная.
2006-11-28 at 4:17 pm
Не согласен:
PgUp и PgDown прокручивают на целый экран, в отличие от стрелок, согласитесь, есть разница, т.к. не всегда есть необходимость в этом.
Да, я знаю про Tab, но на него возложены свои функции, а для плавного скроллинга, при отсутствии мыши, удобнее использовать все-таки стрелки.
Да, кстати, проверяйте факты. При фокусе в каком-нибудь текстовом поле, толку от PgUp и PgDown не больше, чем от кнопок со стрелками.
2006-11-28 at 5:24 pm
Вам не стыдно давать такие вредные советы? То что вы пишете – бред.
2006-11-29 at 7:39 pm
Те кто пользуется только клавиатурой должны быть более продвинутей мышечников, поэтому про таб им не грех не знать.
2006-12-11 at 12:46 am
“А теперь я расскажу, как это бывает вредно и неудобно. Впрочем, попробуйте сами:”
предлагаю добавить пункт “разверните монитор на 180°”
Граждане, имеющие три руки, с большим трудом находят для себя рубашки в магазинах готовой одежды. Может быть мир заточен под решение типичных задач?
2006-12-23 at 1:44 pm
Согласен.
2007-01-22 at 8:29 pm
К вопросу о Tab.
Попробуйте на http://yandex.ru/ им воспользоваться.
В Opera фокус переходит с поля ввода запроса на Submit и обратно, а на остальные ссылки — нет.
2007-03-01 at 1:04 pm
Я скажу ещё одну страшную штуку. Тот же эффект получатся, если зайти на сайт с планшета (ноут без клавиатуры с тачскрином). У них обычно для скролла такие кнопочки есть… Получается та же история что и с кнопками управления курсором.
Я из-за этого market.yandex.ru уже просто ненавижу.
2007-04-07 at 12:39 am
Трудно нажать TAB и потом ходить обычными стрелочками???
Фишка с онфокусом очень удобна при поиске, к примеру тот же яндекс, google, сразу вводишь поиск, нет необходимости клацать мышкой по полю для ввода, особенно если привык юзать больше клаву.
Юзаю FF, жму CTRL+T, сразу фокус на строке яндекса, ввожу ya.ru, enter, сразу фокус на строке поиска, ввел строку и все и листаешь. К мышке вообще не касаюсь.
Отсюда можно сделать выводы, что фокус полезная вещь лишь в уместных местах как например поиск, либо же если страница чисто под форму логина (по центру логин, пароль) тоже удобно.
Не нужно вдаваться в крайности ;)
И потом, в яндексе хлеб не зря едят. ;)
2007-04-08 at 10:02 pm
Первое, что может прийти в голову, прокрутить страницу вниз с помощью стрелки на клавиатуре (не забывайте, мышки нет, мы же договорились).
Не ожидали? Вам предложат выбрать что-нибудь из того, что вы искали ранее — поищите вот ещё раз, а чтобы добраться до курса валют или посмотреть погоду, придётся потрудиться. Подскажу, конечно: нажмите кнопку Tab
Нажать Tab — было первым, что пришло мне в голову абсолютно автоматически. Есть тысяча способов покинуть текстовое поле. Проблема абсолютно надумана.
. Предлагаю: используйте атрибут tabindex и/или accesskey. Именно они помогают сделать навигацию по ссылкам и полям формы на странице проще и удобнее.
Если вы предлагаете пользователю много различной информации на странице, кроме использования какого-то одного сервиса, дайте ему возможность самому решить что и в каком порядке делать: читать или авторизоваться или искать.
Что-то я не догоняю, как первое предложение согласуется со сторым. Предлагаете tabindex пользователю ставить? Или не ставить вообще, пусть сам все решает?
Статья — ложка дегтя среди другой полезной информации на данном рессурсе.
2008-03-05 at 10:40 pm
Чесно говоря чипуха полнейшая, всё от незнания хот кеев…
Ну начнём с того что далеко не все сидят на таких мелких разрешения и не полнооконый браузер. Есть чудо кнопка f11, бах и фулл скрин.
Мотать страницу вниз можно с помощью PageUP PsgeDOWN кнопок. Для набора поиска жмём ctrl+t откроется новая влкадка…
2008-07-18 at 9:29 pm