Как повесить действие фокуса и на дочерних элементов в js?

Здраствуйте
Я бы хотел добавить класс после того как с формы удалиться фокус, но фокус родителя не распространяется на дочерние элементы, и поэтому после того как пользователь ввел в инпут тексе и нажал на свободную часть сайта ничего не происходит, мне бы хотелось что бы действовал фокус родителя и на дочерних элементах, я использовал focusout, blur но ничего не получилось, кто нибудь знает?

Вот форма

<form action="#">
      <div class="form_block" tabindex="0">
         <input type="text" id="fred">
         <div class="text-arr"></div>
      </div>
</form>


вот js

$('form_block').on("focusout", ()=>{
         $('form_block').addClass('dd')
      })
  • Вопрос задан
  • 43 просмотра
Пригласить эксперта
Ответы на вопрос 2
Seasle
@Seasle Куратор тега JavaScript
\( ゚ヮ゚)/
const form = document.querySelector('form');

for (const element of form.elements) {
	const wrapper = element.closest('.form_block');
	if (wrapper !== null) {
		element.addEventListener('blur', (event) => {
			if (!wrapper.contains(event.relatedTarget)) {
				wrapper.classList.add('dd');
			}
		});
	}
}

и tabindex="0" убрать можно.
Ответ написан
Aetae
@Aetae
Тлен
Параметр true позволяет следить за всеми "проходящими мимо" событиями.
form.addEventListener('blur', e => console.log('скоро уйдём с элемента', e.target, 'формы', form), true)
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы