JQuery: предотвращение исчезновения, когда форма находится в фокусе или когда диалог наведен

Question

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

Я создаю небольшую заставку с диалоговыми окнами, которые появляются при наведении курсора на определенные ссылки запуска. Два из них содержат формы (приглашение для входа в систему и регистрационную форму). В настоящее время, если вы наводите курсор мыши на ссылку или на сами диалоговые окна, они остаются с непрозрачностью 100%, а при наведении мыши исчезают. Я пытался предотвратить исчезновение указателя мыши, если фокус ввода находится в фокусе, но сохраняйте его, если фокус ввода отсутствует.

Поскольку нет возможности сделать что-то вроде

var input = $(input); if (input.is(':focused'){ //do something };

код, который я сейчас использую, на самом деле не работает так, как мне хотелось бы:

// Fade the login box.
$(document).ready(function() {
var hide = false;
    var formfocus = false;
// If the link or the dialogue is hovered
$(".log1, .login").hover(function(){
    //Clear the hide timeout
    if (hide) clearTimeout(hide);
    // Fade out the other dialogues
    $(".register, .about").fadeOut(40);
    // Fade in the login dialogue
    $(".login").fadeIn();
}, function() {
    // If an input gains focus, set the variable to true
    $('input').focus(function(){
    if (hide) clearTimeout(hide);
    var formfocus = true;
    });
    // If an input loses focus, set the variable to false
    $('input').blur(function(){
        var formfocus = false;
    });
    // Self explainatory
    if (formfocus==false){
        hide = setTimeout(function() {$(".login").fadeOut();}, 400);
    }
});
});

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

Спасибо, Брендан.

Answer 1

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

Так как у вас есть следующее утверждение:

 $('input').blur(function(){
            var formfocus = false;
 });

Это означает, что ЛЮБОЙ вход, который не в фокусе, тогда таймер начнет таймер обратного отсчета. Если у вас есть только ONE поле ввода для всплеска, это, конечно, гарантирует, что таймер должен сработать, учитывая ваш тип имени для входа в систему, а затем нажмите на поле пароля, а затем вы перейдете в другое окно, которое hover_out огонь, и таймер запустится!

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

Определите, какая форма ввода имеет фокус, используя JavaScript или jQuery

Answer 2

Я просто следую вашей логике и немного упрощаю до следующего:

$(function() {
        var hide = false;
        $(".trigger, .login").hover(function() {
            if (hide) clearTimeout(hide);
            $(".login").fadeIn(500);
            $(".login2").fadeOut(500);
        }, function() {
            // Make timeout for this
            hide = setTimeout(function() { $(".login").fadeOut(500); }, 1000);
        });

        $(".trigger2, .login2").hover(function() {
            if (hide) clearTimeout(hide);
            $(".login2").fadeIn(500);
            $(".login").fadeOut(500);
        }, function() {
            // Make timeout for this
            hide = setTimeout(function() { $(".login2").fadeOut(500); }, 1000);
        });
    });

И соответствующий HTML-код:

<div class="main">
    <div class="trigger">
        Trigger Login
    </div>
    <div class="trigger2">
        Trigger 2
    </div>
</div>
<div class="login">
    <input type="text" />
</div>
<div class="login2">
    <select>
        <option>FDKLFS</option>
    </select>
</div>

И это работает для меня в моем FF3.5, единственное существенное отличие состоит в том, что я не учел ввод данных в форме / всплеске, я просто считаю, что перемещение курсора из формы вызовет тайм-аут. Обратите внимание, что реализация похожа на специальное решение, и она лучше реорганизовала бы более общий вызов функции, чтобы связать все эти события.