admin / 07.10.2018

Ловим потерю фокуса. Метод blur() в jQuery

Устанавливает обработчик потери фокуса элементом или одним из его дочерних. Метод имеет два варианта использования:

.focusout(handler(eventObject)):jQuery1.0

— функция, которая будет установлена в качестве обработчика. При вызове она будет получать объект события eventObject.

.focusout(eventData, handler(eventObject)):jQuery1.4.3

— см. выше.
— дополнительные данные, передаваемые в обработчик. Они должны быть представлены объектом в формате: .

Убрать установленный обработчик можно с помощью метода unbind().

Метод хорошо сочитается с и плохо с (оба являются методами получения фокуса).

В отличае от , событие происходит как при потери фокуса самим элементом, так и его дочерними.

Пример

Ссылки

// установим обработчик события focusout, элементу с идентификатором foo $(’#foo’).focusout(function(){alert(’Элемент foo потерял фокус.’);});   // установим еще один обработчик события focusout, на этот раз элементам // с классом block. В обработчик передадим дополнительные данные $(’.block’).focusout({a:12, b:"abc"},function(eventObject){var externalData ="a="+ eventObject.data.a+", b="+ eventObject.data.b;alert(’Элемент с классом block потерял фокус. ‘+’В обработчик этого события переданы данные: ‘+ externalData );});

JQuery: напротив .focus() или Как удалить фокус из поля ввода

Ловим потерю фокуса. Метод blur() в jQuery

Метод blur() в jQuery позволяет назначить для определенного элемента на странице обработчик, который будет вызван как только будет потерян фокус с данного элемента. Первоначально это событие относилось преимущественно к элементам формы — тегам input, однако последние версии браузеров способны обрабатывать данное событие практически для всех видов DOM-элементов.

Метод blur(), по сути, это укороченная альтернатива использования метода .on( «blur», handler ).

Синтаксис имеет две вариации:

где handler — функция-обработчик события.

Также есть вариант с двумя параметрами, где первый — eventData — это данные любого допустимого типа, которые могут быть переданы функции обработчику:

1 .blur([eventData], handler)

Рассмотрим пример с простой формой:

1 2 3 <form> <input id="test" type="text" value="Тестовое поле"> </form>

Добавляем обработчик к полю с id «test», который вызовется при потере фокуса (будет выведено сообщение).

1 2 3 $( "#test" ).blur(function() { alert( "Фокус потерян!" ); });

Другие посты

Ловим потерю фокуса. Метод blur() в jQuery

Событие, которое является противоположным событию focus, является событие потери фокуса. Оно происходит тогда, когда элемент перестает быть активным.

Событие потери фокуса в Javascript называется blur.

Давайте посмотрим, как это работает на примере текстового поля.

<input style=»width:300px;» type=»input» value=»Кликните сюда, а затем нажмите клавишу Tab» onBlur=»alert(‘фокус потерялся’)»>

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

Кстати, хотите узнать есть ли смысл в каком-то элементе на вашем сайте с помощью «целей» Яндекс Метрики и Google Analytics?

Уберите то, что НЕ работает, добавьте то, что работает и удвойте вашу выручку.

Курс по настройке целей Яндекс Метрики..

Курс по настройке целей Google Analytics..

Фактически пример, который вы дали для фокусировки на этом сайте, работает очень хорошо, если вы не сосредоточены на консоли. Причина, по которой это не работает, — это просто потому, что она не ворует фокус с консоли разработчика. Если вы запустите следующий код на своей консоли и затем быстро нажмите в окне своего браузера, вы увидите, что он фокусирует окно поиска:

Что касается вашего другого, то, что в прошлом беспокоило меня, — это порядок событий. Вы не можете вызвать focus () для элемента, который не был прикреплен к DOM. Элемент, который вы пытаетесь сфокусировать, уже привязан к DOM?


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

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

Обработчик события focusout

В моем случае я делал что-то в этом направлении

Это не сработало. Я только понял, что происходит, когда я выполнил $ (‘# elementid’). Focus () `из консоли, которая действительно работала. Разница — в моем коде выше цели нет уверенности в том, что цель будет отображаться, потому что анимация может быть неполной . И есть ключ

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


Я понимаю, что это старо, но натолкнулось на это сегодня. Ни один из ответов не работал для меня, что я нашел, что работал был setTimeout. Я хотел, чтобы мой фокус был помещен на входной файл модального файла, используя обработанный setTimeout. Надеюсь это поможет!


У меня также была эта проблема. Решение, которое работало в моем случае, заключалось в использовании свойства tabindex в элементе HTML.

Я использовал для некоторых элементов li внутри списка, и я не смог перенести фокус на первый li, используя .focus (), поэтому я просто добавил атрибут tabindex для каждого li во время цикла.

так что теперь пользователь

То, что +1 было индексом, начинается с 0. Также убедитесь, что элемент присутствует в DOM перед вызовом функции .focus ()

Надеюсь, это поможет.


ДОПОЛНИТЕЛЬНОЕ РЕШЕНИЕ. Если бы проблема с фокусом () не работала, но в конечном итоге оказалось, что нужно было прокручиваться до правильной позиции:

  • https://.com/a/43342974/1335717


FILED UNDER : IT

Submit a Comment

Must be required * marked fields.

:*
:*