Question

我已经四处寻找并且没有在任何地方找到解决方案。这是情况。

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

可以这样做吗？我的应用程序需要检测关注表单的用户，然后向下滑动signupHelper。当用户在表单外部单击时，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();      
});

检测表格焦点和模糊（多个输入）

1 个答案: