JQuery: Firefox Focusout Event
У меня есть два поля ввода в div, я хочу скрыть этот div на focusOut входов, но только если у них обоих нет фокуса.
Это распространенная проблема Firefox (некоторые называют это соблюдением стандартов), но основное внимание уделяется основному телу документа.
HTML
<div id="baz">
<input type="text" id="foo" name="foo" />
<input type="text" id="bar" name="bar" />
</div>
JQuery
// jQuery Example
jQuery(":input").focusout(function(){
// Don't do anything if one of the input boxes has focus
if( jQuery(":input").is( jQuery(document.activeElement) ){ return; }
// Hide the container if one of the inputs loose focus
jQuery(this).parents("div").css("display","none");
}
Хотя это распространенная ошибка, я забываю, как решал ее в прошлом. Я думаю, что это было связано с установкой тайм-аута или обновлением экрана перед проверкой activeElement,
Пример jsFiddle
Обновлен jsFiddle (та же проблема FF4)
2 ответа
jQuery(":input").focusout(function(){
var elem = jQuery(this).parent("div");
window.setTimeout(function(){
// Don't do anything if one of the input boxes has focus
if( jQuery(":input").is( jQuery(document.activeElement) )){ return; }
// Hide the container if one of the inputs loose focus
elem.hide();
}, 0);
})
jQuery(document).ready(function () {
var timeoutID;
jQuery(":input").focus(function () {
window.clearTimeout(timeoutID);
}).focusout(function () {
timeoutID = window.setTimeout(function () {
jQuery("#baz").hide();
}, 0);
});
});
Я думаю, что решение amit_g было почти там. Я смутно помню, что сделал это двумя способами:
- сравнить входы с
activeElement(метод показанный выше) - установка / очистка класса "focus" для элемента для соответствующих событий
Я думаю, что оба метода требуют использования setTimeout, так как Firefox имеет отложенный триггер, который нам нужно форсировать. Хотя я слышал, что FF придерживается стандартов здесь, я лично думаю, что стандарт должен быть изменен.
Таким образом, в дополнение к добавлению синхронизированного вызова функции, он также должен быть очищен, если другой "приемлемый" элемент получил фокус. Ниже приведен не производственный код, но он показывает, что он служит примером: