jQuery метод .focusin()

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

jQuery метод .focusin() привязывает JavaScript обработчик событий "focusin" (получение фокуса элементом, или любым вложенным элементом), или запускает это событие на выбранный элемент. Если Вам необходимо привязать JavaScript обработчик событий, который срабатывает при потере фокуса элемента, или любым вложенным элементом, то воспользуйтесь методом .focusout().

jQuery синтаксис:

Синтаксис 1.0:

JavaScript

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

Синтаксис 1.4:

JavaScript

$( selector ).focusin( handler )

handler - Function( Event eventObject )

Синтаксис 1.4.3:

JavaScript

$( selector ).focusin( eventData, handler )

eventData - Anything

handler - Function( Event eventObject )

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

JavaScript

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

$( selector ).trigger( "focusin" )

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

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

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

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

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

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

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

index.html

HTML

<button>Клик</button><br />
<div style="padding: 30px">
  <input type="text" /><br />
  <input type="text" />
</div>

main.js

JavaScript

$(document).ready(function () {
    $('button').click(function () {
        $('div').focusin()
    })
    $('div').focusin(function () {
        $(this).css('background', 'red')
    })
    $('div').focusout(function () {
        $(this).css('background', 'green')
    })
})

В этом примере с использованием jQuery метода .focusin() мы при нажатии на элемент <button> (кнопка) вызываем событие "focusin" на элементе <div>. Самому элементу <div> задаем, что при срабатывании события "focusin" выполнить функцию, которая с использованием метода .css() устанавливает цвет заднего цвета красный, а при срабатывании события "focusout" зеленый.