Фокус на поле ввода при загрузке страницы: jQuery метод

Быстрый ответ

$(function() {
    $('#inputID').focus();
});

Этот скрипт устанавливает фокус на элемент с идентификатором #inputID сразу после полной загрузки документа. Замените #inputID на ID требуемого вам текстового поля. Не забудьте подключить библиотеку jQuery, иначе код не будет работать!

Подробное разъяснение работы с фокусировкой в jQuery

Ситуация выглядит вполне понятной, не так ли? Но если вам интересно углубиться в эту тему, давайте сделаем это более детально.

Работа со всевозможными типами полей ввода

Ситуации бывают разные, и иногда у поля ввода отсутствует идентификатор. Возможно, оно является первым видимым текстовым полем:

// Эффективная строчка, фокусирующаяся на первом видимом текстовом поле
$('input:text:visible:first').focus();

Этот простой подход способен облегчить вашу работу!

Подробнее об этом расскажет наш спикер на видео

Подход к работе с динамическим содержимым

Когда дело касается динамически подгружаемого содержимого, важно дождаться полной готовности DOM:

// Мы должны дождаться полной загрузки окна, даже до загрузки последней картинки
$(window).on('load', function() {
    $('#dynamicInput').focus();
});

Динамическое содержимое может создать проблемы, однако с помощью jQuery мы всегда придём к решению!

Атрибут autofocus в HTML5: товарищ или подстава?

HTML5 представил нам атрибут autofocus, который представлялся спасительным:

<input type="text" id="autoFocusedInput" autofocus>

Но, к сожалению, Internet Explorer имеет конфликты с autofocus. Поэтому, чтобы не оставлять старый браузер в затруднительном положении, мы используем второстепенный план на jQuery:

// jQuery к IE9: "Держись, старик, я тут для тебя!"
$(function() {
    if (!("autofocus" in document.createElement("input"))) {
        $('#autoFocusedInput').focus();
    }
});

Совестливый веб-разработчик никогда не оставит браузер в затруднительном положении (ну, возможно, за исключением IE6).

Учет мобильных устройств, HTML5 и доступности

Автоматическая фокусировка на мобильных устройствах может вызвать раздражение из-за появления клавиатурного интерфейса и вызвать проблемы с доступностью:

// Основное правило веб-разработки — не создавать неудобства пользователям
if (!window.matchMedia("(pointer: coarse)").matches) {
    $('#inputID').focus();
}

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

Почему бы не использовать чистый JavaScript?

Уже устали от jQuery? Можно использовать нативный JavaScript без чувства вины:

// Для тех, кто любит все делать правильно
document.addEventListener('DOMContentLoaded', function() {
    document.getElementById('inputWithoutJQuery').focus();
});

Иногда всё, что вам нужно — это чистый JavaScript: без добавок, без глютена, но вкусный!

UX и юзабилити: не перегружайте внимание!

Используйте фокусировку осторожно. Её избыток может разозлить пользователей и привести к отрицательному опыту. Помните, возможности по фокусировке могут быть огромными, но ответственность за этого тоже серьезная.

Визуализация

$(document).ready(function() {
    $('#livingRoomInput').focus(); // Сцена гостиной, начнем!
});

Фокус настроен, и пользователь может немедленно приступить к вводу текста («Как всё быстро происходит!», — не сказал ни единственный пользователь никогда).

Динамический фокус: подстраиваемся под действия пользователя

Иногда целесообразнее настроить фокус по действиям пользователя:

// "Открыли форму — пора приступать к действиям!"
$('#openFormButton').on('click', function() {
    setTimeout(function() { // Даем анимации время на процесс...
        $('#formInputInModal').focus(); // И вуаля!
    }, 300);
});

Полезные материалы

1. .ready() | Документация jQuery API — в этой статье рассматривается код, который выполняется после полной загрузки DOM документа.
2. Событие focus | Документация jQuery API — всё, что вам нужно знать об методе .focus() в jQuery.
3. Перемещение курсора в конец текстовой области или поля ввода | CSS-Tricks — руководство по контролю над курсором в текстовых полях с помощью jQuery.
4. Событие DOMContentLoaded в документах – Web APIs | MDN — объясняется, что представляет из себя событие DOMContentLoaded.
5. Как сымитировать нажатие кнопки при нажатии клавиши Enter — даны указания о том, как симулировать клик мыши при нажатии клавиши Enter.