带有高亮的多重登录表单

这有点具体… 但我想着，也许它对某些人有用。我最近需要在一个页面上创建多个不同的登录表单。通过 CSS 我们知道我们可以使用:active来对活动输入应用样式。这很有用… 而且我们之前已经介绍了如何进行 输入和标签高亮。但现在我们需要更进一步，高亮当前的表单本身。

这篇文章相当古老。你可能现在会直接使用 :focus-within。

HTML

三个块，每个块都有一个表单

<div class="login-block">
    <h3>Sharepoint Login</h3>
    <form action="#" method="post" target="_blank">
        <p><label for="sharepoint-company-name">Company</label><input type="text" name="sharepoint-company-name" id="sharepoint-company-name" /></p>
        <p><label for="sharepoint-user-name">User Name</label><input type="text" name="ftp-user-name" id="ftp-user-name" /></p>
        <p><label for="sharepoint-password">Password</label><input type="password" name="ftp-password" id="ftp-password" /></p>
        <p class="submit-wrap"><input type="submit" id="sharepoint-submit" class="button" value="Login" /></p>
    </form>
</div>

<div class="login-block">
    <h3>FTP Login</h3>
    <form action="#" method="post" target="_blank">
        <p><label for="ftp-user-name">User Name</label><input type="text" name="ftp-user-name" id="ftp-user-name" /></p>
        <p><label for="ftp-password">Password</label><input type="password" name="ftp-password" id="ftp-password" /></p>
        <p class="submit-wrap"><input type="submit" id="ftp-submit" class="button" value="Login" /></p>
    </form>
</div>

<div class="login-block last"> 
    <h3>Secret Area Login</h3>
    <form action="#" method="post" target="_blank">
        <p><label for="secret-user-name">User Name</label><input type="text" name="ftp-user-name" id="ftp-user-name" /></p>
        <p><label for="secret-password">Password</label><input type="password" name="ftp-password" id="ftp-password" /></p>
        <p class="submit-wrap"><input type="submit" id="ftp-submit" class="button" value="Login" /></p>
    </form>
</div>

CSS

CSS 并不特别有趣。表单本身周围有白色边框，我们设置了一个带有彩色边框的类。这个类将通过 JavaScript 应用和移除，将样式信息正确地从 JavaScript 中分离出来。

.login-block {
    float:left;
    margin:0 49px 25px 0;
    text-align:center;
    width:260px;
}

.login-block form {
    -moz-border-radius:15px 15px 15px 15px;
    -moz-box-shadow:0 0 10px #333333;
    border:3px solid white;
    padding:20px;
}

.login-block .active-form {
    border-color:#d09e6d;
}

jQuery JavaScript

使这“工作”的部分在这里。 当一个输入获得焦点时，它会移除站点上所有表单的高亮，然后将其添加回包含这个新获得焦点的输入的表单。 感谢 bartaz 指出 jQuery 1.4 现在支持表单的“focusin”和“focusout”事件，这些事件在表单内的任何输入处于活动状态时触发。我们可以监视它。当 focusin 触发时，我们将移除所有表单的高亮，并将它添加回刚刚触发事件的那个表单。

$(function() {
    var $forms = $("form");
    $forms.focusin(function() {
        $forms.removeClass("active-form");
        $(this).addClass("active-form");
    });
});

演示

请注意，它使用了一个古老版本的 jQuery。较新的版本不支持直接使用 focusin。