Проблемы с событиями 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

ONBLUR, установить тайм-аут, который ждет секунды, прежде чем скрыть соответствующий div. Затем, onclick, очистите тайм-аут. Вот основной пример:

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

Answer 3

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

Answer 4

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

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

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