jquery - 检测形状焦点和模糊(多个输入)

Question

我四处寻找，但没有找到解决方案。情况是这样的。

我有一个注册表单，其中多个输入都在表单标记内。如何检测某人何时专注于表单并单击了表单？注意* 这与单独输入焦点/模糊不同。在这种情况下，我想将表单视为一个整体，这意味着，在表单本身内的各个输入字段之间切换时，不会激活模糊状态。

这可以做到吗？我的应用程序需要检测用户专注于表单，然后向下滑动注册助手。当用户在表单外部单击时，signupHelper 会向上滑动。

$("document").ready(function() { 

/* DETECT FORM USE */

$('#signupForm form').live( "focus", function(event) {
    if( $('#signupHelper').is(":visible") == false) $('#signupHelper').slideDown();
});

$('#signupForm form').live( "blur", function(event) {
    if( $('#signupHelper').is(":visible") ) $('#signupHelper').slideUp();
});

});

    <div id="signupForm">

<form class="signupMe">
<table cellspacing="0px">
    <tr>
        <td class="step">1</td>
        <td class="content" valign="bottom">
            Choose your username
            <input type="text" name="usernameAttempt">
    </td>

    <tr><td colspan="2" class="vSpace"></td></tr>

    <tr>
        <td class="step">2</td>
        <td class="content" valign="bottom">
            Email Address
            <input type="text" name="usernameAttempt">
        </td>
    </tr>

    <tr><td colspan="2" class="vSpace"></td></tr>

    <tr>
        <td class="step">3</td>
        <td class="content" valign="bottom">
            Password
            <input type="password" name="usernameAttempt">
        </td>
    </tr>

    <tr><td colspan="2" class="vSpace"></td></tr>

    <tr>
        <td></td>
        <td><img align="right" src="/img/signup/signup.jpg" /></td>
    </tr>

</tr><table>
</form>

</div>

任何帮助将不胜感激!谢谢，马克·安德森

Answer 1

尝试out this fiddle 。关键是观察所有正确的事件。这只是功能的基本示例。

$('form').live('focus click', function(e){
    $('#signuphelper').show();
    e.stopPropagation(); // stop prop so it doesnt reach body
});

$('form :input:last').blur(function(){  // blur of last input in form
    $('#signuphelper').hide();
}); 

$('body').live('click', function(){ // if the event reaches body hide helper
    $('#signuphelper').hide();      
});