Как отследить потерю фокуса всех полей формы в jQuery?

Question

[Сергей]

На мобильной версии сайта есть боковая панель с формой. По умолчанию ширина панели равна 50% экрана. Хочу сделать, чтобы при получения фокуса полями формы, панель увеличивалась до 100% ширины экрана, что я успешно реализовал:

$('#callback-form').focusin(function(){
  $('#sidebar').animate({left: '0%',width: '100%'}, 200);
});

Так же реализован возврат ширины до 50% после потери фокуса полями:

$('#callback-form').focusout(function(){
  $('#sidebar').animate({width: '50%',left: '50%'}, 200);
});

Но, к сожалению, оба триггера срабатывают даже когда идет простое переключение фокуса между полями. Получается, что после выбора другого поля, панель сначала сужается, потом снова расширяется. А так как у меня еще стоит валидация полей html5, то после нажатия submit панель вообще колбасит, если поле не валидное.

Итак, как все-таки выстроить логику? .is( ":focus" ) почему-то не срабатывает.

Answer 1

[DTX]

Ждать 200мс после потери фокуса? При установке фокуса - сбрасывать таймер. Если всё-таки дождались, сжимать до 50 процентов.

Answer 2

[vdem]

var isFormFocused = false;
  $('form :input').focus(function() {
    if(!isFormFocused) {
      // Форма получила фокус, делаем здесь что нужно
      isFormFocused = true;
    }
  });
  $('form :input').blur(function() {
    if(0 === $('form :focus').length) {
      // Форма потеряла фокус
      isFormFocused = false;
    }
  });

Answer 3

[Сергей]

Рабочим оказался микс из вариантов vdem и DTX:

var isFormFocused = false;
$('#callback-form :input').focus(function() {
  if(!isFormFocused) {
    isFormFocused = true;
  };

  if(isFormFocused){
    $('#sidebar').animate({width: '100%',left: '0%'}, 200);
  };
});

$('#callback-form :input').blur(function() {
  // задержка все-таки необходима
  setTimeout(function () {
    if(0 === $('#callback-form :focus').length) {
      isFormFocused = false;
    };
    if(!isFormFocused){
      $('#sidebar').animate({width: '50%',left: '50%'}, 200);
    };
  }, 100);
});

Comments

[vdem]

Все же думаю, что можно и без таймаута обойтись, но сейчас нет времени возиться. И вообще решение с таймаутом принципиально некрасивое в данном случае.