jQuery метод .focus()

Определение и применение

jQuery метод .focus() привязывает JavaScript обработчик событий focus (получение фокуса элементом), или запускает это событие на выбранный элемент.

jQuery синтаксис:

Синтаксис 1.0:

JavaScript

$( selector ).focus() // метод используется без параметров

$( selector ).focus( handler )

handler - Function( Event eventObject )

Синтаксис 1.4.3:

JavaScript

$( selector ).focus( eventData, handler )

eventData - Anything

handler - Function( Event eventObject )

Обращаю Ваше внимание, что метод .focus(), используемый вместе с функцией, переданной в качестве параметра (handler) является, короткой записью метода .on(), а без параметра является короткой записью метода .trigger():

JavaScript

$( selector ).on( "focus", handler )

$( selector ).trigger( "focus" )

Добавлен в версии jQuery

1.0 (синтаксис обновлен в версии 1.4.3)

Значения параметров

Параметр	Описание
eventData	Объект, содержащий данные, которые будут переданы в обработчик событий.
handler	Функция, которая будет выполнена каждый раз, когда событие срабатывает. Функция в качестве параметра может принимать объект `Event`.

Порядок событий в jQuery 4.0

При переходе фокуса между элементами jQuery 4.0 использует порядок браузера: blur → focusout → focus → focusin в современных браузерах. Не рассчитывайте на прежний порядок jQuery focusout → blur → focusin → focus. Internet Explorer 11 сохраняет особенности обработки фокуса.

Пример старого кода

Пример использования jQuery метода .focus() (без параметров и с функцией)

Нажмите ▶, затем выполните действие из пояснения. Измените JavaScript и запустите пример ещё раз. В редакторе используется jQuery 4.0.0.

index.html

HTML

<button>Клик</button><br />
<input />

main.js

JavaScript

$(document).ready(function () {
    $('button').click(function () {
        $('input').focus()
    })
    $('input').focus(function () {
        $('input').attr('placeholder', 'focus')
    })
    $('input').blur(function () {
        $('input').attr('placeholder', 'blur')
    })
})

В этом примере с использованием jQuery метода .focus() мы при нажатии на элемент <button> (кнопка) вызываем событие "focus" на элементе <input>. Самому элементу <input> задаем, что при срабатывании события "focus" на элементе выполнить функцию, которая с использованием метода .attr() добавляет атрибут placeholder со значением focus.

Кроме того, мы с использованием jQuery метода .blur() устанавливаем, что при получении фокуса элементом <input> вызвать функцию, которая с использованием метода .attr() добавляет атрибут placeholder со значением blur.