Question

我正在使用VB.net编写的Web应用程序。如果用户单击未在密码框中输入任何内容的“登录”按钮，则该应用程序的登录页面上将有条件显示一条错误消息：

所有这些功能目前都可以正常使用，并且仅当在密码字段中未输入任何内容并且单击该表单或单击“继续”按钮时，才会显示该消息。

但是，即使没有显示该消息，也仍然留有空间显示

已要求我删除此空间，以便在不显示错误消息时，在“密码”文本框的正下方显示“忘记密码”链接。

但是，尽管在CSS中设置了错误消息元素的可见性属性，但在未显示消息时，我似乎实际上并没有删除空格。

我发现这样做的唯一方法是在CSS-中将元素的display属性设置为none，但这显然意味着在保留密码字段时不显示消息空白。

该字段上设置的CSS是：

.loginarea .loginerror {
    color: Red;
    font-size: 1.8em;
}

，并且表单字段显示为：

<body class="login">
    <form id="form1" runat="server">
        ...
        <div id="divLoginBg" runat="server" class="loginbg">
            <div class="loginarea">
                <asp:Panel ID="Step1" CssClass="greyblock" runat="server">
                    <asp:TextBox ID="Password" ValidationGroup="loginpage" autocomplete="off" TextMode="Password" runat="server" /><br />
                    <asp:RequiredFieldValidator ID="Req2" ValidationGroup="loginpage" ControlToValidate="Password" runat="server" CssClass="loginerror" ErrorMessage="Please enter your password" /><br />
                    ...
                </asp:Panel>
                ...
            </div>
        </div>
    </form>
</body>

如何有条件地将元素的display属性设置为none？也就是说，如果在文本框中没有输入密码，则其display应该仅是none吗？

Answer 1

使用display:none代替visibility:hidden，因为使用第一个方法使有问题的标记根本不会出现在页面上，并且不会为它分配空间。使用第二个标签会使标签不可见，但会在页面上为其分配空间

这是工作中的Fiddle

Answer 2

使用此CSS

numpy

}

，如果您正在使用任何jquery进行字段验证，请检查空的用户名或密码。只需写下以显示此消息 $（'。loginerror'）。show（）;

被CSS隐藏的元素仍会占用页面空间-如何设置显示：有条件地无显示？

2 个答案: