jQuery - вызывает событие, когда фокус покидает группу элементов управления.

Question

У меня есть 3 текстовых поля внутри div, и мне нужно вызвать событие, когда фокус покидает один из этих входов и не переходит к другому из этих 3 входов.

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

Я пытался с помощью focusout на всех 3 входах и проверка, если document.ActiveElement является одним из 3 входов, но focusout одного контроля происходит раньше focusin по другому так document.ActiveElement всегда пусто

У кого-нибудь есть идеи, как обойти это?

Answer 1

Я хотел бы рассмотреть возможность использования таймера для решения этой сложной дилеммы.

Когда фокус потерян, запустите таймер. Затем вы можете отменить таймер, если фокус будет установлен на другой "безопасный" вход.

Что-то вроде этого:

var timeoutID;

$("#TheSafeZone input").focus(function () {
    if (timeoutID) {
        clearTimeout(timeoutID);
        timeoutID = null;
    }
});

$("#TheSafeZone input").blur(function () {
    releaseTheHounds();
});

function releaseTheHounds() {
    timeoutID = setTimeout(function () {
            alert("You're all going to die down here");
    }, 1);
}

Вот рабочий пример

ПРИМЕЧАНИЕ: я установил таймаут просто 1msМне кажется, это работает надежно, но, возможно, стоит провести несколько тестов в других браузерах (я использую Chrome). Я думаю, это связано с тем, как движок JS обрабатывает события, но я не знаю достаточно об этом, чтобы с уверенностью сказать, что все браузеры будут работать одинаково

Answer 2

Поместите события "Blur" и "Focus" с противоположной логикой, чтобы при выходе пользователя из группы элементов управления, указанных в DIV, вызывалось только событие "Blur".

$(document).on("blur","#edit-area .form-control", function (event) {
      $('.editButtons').show();

  });
  $(document).on("focus","#edit-area .form-control", function (event) {
      $('.editButtons').hide();

  });