0

在开始之前，我想表达我对 JavaScript 语言一无所知。我唯一用过的就是 JQueryUI——甚至是复制粘贴。

目前，我有一个包含所有标准TextBox输入的用户注册页面。但是，每当用户在原始文本框中输入文本时，我想向下滑动辅助“确认电子邮件”和“确认密码”。

我知道社区喜欢帮助那些能够证明他们帮助自己的人，但我目前唯一需要展示的是我试图为此寻找解决方案并失败了。

有人可以告诉我一种方法吗？

编辑：密码框的代码

<div class="ctrlHolder">
    <asp:Label ID="Label9" runat="server" Font-Bold="True" Text="Password"></asp:Label>
    <asp:Label ID="Label11" runat="server" CssClass="styleLabelWatermarkWashout" Text="**********"></asp:Label>
    <br />
    <%--data-default-value="Placeholder text"--%>
    <asp:TextBox ID="txtRegisterPassword" runat="server" CssClass="textInput styleTextBoxCenter required"
        TextMode="Password" MaxLength="20"></asp:TextBox>
</div>
4

4 回答 4

2

因此，假设您可以创建类似于以下内容的标记：

<div class="ctrlHolder">
    <asp:Label ID="PasswordLabel" runat="server" Font-Bold="True" Text="Password"></asp:Label>
    <asp:Label ID="Label11" runat="server" CssClass="styleLabelWatermarkWashout" Text="**********"></asp:Label>
    <br />
    <%--data-default-value="Placeholder text"--%>
    <asp:TextBox ID="txtRegisterPassword" runat="server" CssClass="textInput styleTextBoxCenter required" TextMode="Password" MaxLength="20"></asp:TextBox>
</div>

<div id="confirm-password-box" class="ctrlHolder">
    <asp:Label ID="ConfirmPasswordLabel" runat="server" Font-Bold="True" Text="Confirm Password"></asp:Label>
    <asp:Label ID="Label12" runat="server" CssClass="styleLabelWatermarkWashout" Text="**********"></asp:Label>
    <br />
    <%--data-default-value="Placeholder text"--%>
    <asp:TextBox ID="txtConfirmRegisterPassword" runat="server" CssClass="textInput styleTextBoxCenter required" TextMode="Password" MaxLength="20"></asp:TextBox>
</div>

您需要添加一些 CSS 规则以#confirm-password-box默认隐藏。然后，在页面的某处添加此脚本代码（最好尽可能靠近结束</body>标记）：

<script>

$(function(){

    $('#<%: txtRegisterPassword.ClientID %>').on('blur', function(event){

        $('#confirm-password-box').slideToggle('slow');

    });

});

</script>

blur当控件失去焦点时发生该事件。您真的不想听keyup，因为每次用户在密码框中输入字符时都需要调用此代码...

请注意，这段特定的 jQuery 代码需要jQuery 1.7 或更高版本，因此请使用 NuGet 更新您的脚本引用（如果您没有使用其他任何需要旧版本 jQuery 的东西）。

于 2012-11-09T07:25:56.503 回答
1

我会在您正在处理的页面上添加对 jquery 的引用。然后制作一个新脚本（在页面上或在单独的.js文件中），将新函数附加到文本框的 onkeyup 事件。像这样的东西。

$(document).ready(function()
{
    $('mytextbox').bind('keyup', function() { 
        $('myCOnfirmationTextbox').slideDown();
    };
});

这会将此函数附加到与“mytextbox”类或 ID 对应的所有元素。因此，如果您有输入<input type="text" id="email" class="emailInput"/>，则可以使用$('#email')将事件绑定到此特定元素。或者您使用$('.Emailinput')绑定到电子邮件的所有输入元素。

顺便说一句，我还没有测试过代码，但是这个或非常类似的东西应该可以工作。

如果您使用单独的.js文件，请不要忘记在您的页面中也引用它。

于 2012-11-09T07:13:52.943 回答
0

填满电子邮件文本框后，您可以使用 innerHTML 在电子邮件文本框下方创建一个新文本框。如果你可以在这里发布代码，我可以给你代码

于 2012-11-09T07:09:40.033 回答
0
  • 根据您的 html 替换此答案中的控件 ID。

您可以通过以下方式显示确认控件。

 $('#password').onfocusout(function() {   
      // This will show once you complete entering Email and Password.
      $('#confirmEmail').attr('display', 'inline');
      $('#confirmPassword').attr('display', 'inline');
    });

让我告诉你如何实现确认电子邮件。同样的东西可以用来实现确认密码。

当您离开确认电子邮件文本框时，比较用户在电子邮件和确认电子邮件文本框中输入的电子邮件。

这可以通过以下方式完成

$('#confirmEmail').onfocusout(function() {
  if($('#confirmEmail').val() == $('#Email').val())
{
      // Emails entered are same
}
else
{
     alert('Emails entered are not matching. Please reenter emails.');
}
});

同样，您可以检查确认密码。

于 2012-11-09T07:13:19.247 回答