使用JavaScript输入后显示确认文本框

Question

在开始之前，我想传达的是，我对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>

Answer 1

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

<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的内容）。

Answer 2

我会在您正在处理的页面上添加对jquery的引用。 然后创建一个新脚本（在页面上或在单独的.js文件中），该脚本将新功能附加到文本框的onkeyup事件。 这样的事情。

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

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

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

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

Answer 3

一旦填充了该文本框，您就可以使用innerHTML在电子邮件文本框下方创建一个新文本框。 如果您可以在此处发布代码，我可以给您代码

Answer 4

• 根据您的html替换此答案中的控件ID。

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

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

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

当您将重点放在“确认电子邮件”文本框之外时，比较用户在“电子邮件”和“确认电子邮件”文本框ex中输入的电子邮件。

这可以通过以下方式完成

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

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