Проблемы с событиями jQuery .blur () и .focus ()

Question

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

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

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

Как лучше всего решить эту проблему? Я хотел бы иметь событие размытия, чтобы скрыть div, но должно быть какое-то исключение, когда пользователь хочет щелкнуть внутри div, чтобы событие blur не скрыло div, в который они пытаются кликнуть.

Спасибо за помощь.

Answer 1

Вы можете установить тайм-аут для события размытия и скрыть «help div» сразу, только когда другое поле ввода находится в фокусе.

Примерно так:

$("#input1").focus(function() { 
      hideAllHelpers(); $("#helper1").show(); 
});

$("#input1").blur(function() { 
      window.setTimeout(function() { $("#helper1").hide(); },2000); });
});

$("#input2").focus(function() { 
      hideAllHelpers(); $("#helper2").show(); 
});

// etc...

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

Answer 2

Используйте событие mousedown, которое срабатывает, когда пользователь щелкает вспомогательный элемент, но до того, как событие размытия запускается на элементе ввода.

$('#input').blur(function () {
  $('#helper').hide();
});

$('#helper').mousedown(function () {
  console.log('This executed before the blur event');
});

Answer 3

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

Answer 4

Onblur, установите тайм-аут, который ждет секунду, прежде чем скрыть соответствующий div. Затем, кликните, очистите тайм-аут. Вот базовый пример ...

// Namespace for timer
var myPage = {
  timer: null
}

// Blur event for textbox
.blur(function() {
  myPage.timer = setTimeout(function() { 
    // Hide the div
  }, 1000);
});

// Click event for DIV
.click(function() {
  clearTimeout(myPage.timer);
  // Fill in the textbox
  $(this).hide();
});