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

StackOverflow https://stackoverflow.com/questions/1429112

  •  07-07-2019
  •  | 
  •  

Вопрос

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

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

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

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

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

Это было полезно?

Решение

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

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

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

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

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

// etc...

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

Другие советы

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();
});

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

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

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

$('#helper').mousedown(function () {
  console.log('This executed before the blur event');
});
Лицензировано под: CC-BY-SA с атрибуция
Не связан с StackOverflow
scroll top