输入JavaScript后显示确认文本框[英] Show confirmation textbox after entry with JavaScript

本文是小编为大家收集整理的关于输入JavaScript后显示确认文本框的处理方法,想解了输入JavaScript后显示确认文本框的问题怎么解决?输入JavaScript后显示确认文本框问题的解决办法?输入JavaScript后显示确认文本框问题的解决方案?那么可以参考本文帮助大家快速定位并解决问题,译文如有不准确的地方,大家可以切到English参考源文内容。

问题描述

在开始之前,我想传达我不限于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>

推荐答案

我会将jQuery的引用添加到您正在处理的页面上. 然后制作一个新脚本(在页面上或单独的.js文件中),该脚本将新功能附加到文本框的OnKeyup事件上.这样的东西.

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

这将将此功能附加到与" myTextbox"类或ID相对应的所有元素.因此,如果您有输入<input type="text" id="email" class="emailInput"/>,则将使用$('#email')将事件绑定到此特定元素.或者,您使用$('.Emailinput')绑定到电子邮件的所有输入元素.

顺便说一句,我还没有测试过代码,但是这个或非常相似的东西应该起作用.

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

其他推荐答案

因此,假设您可以创建与此类似的标记:

<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版本).

其他推荐答案

您可以使用InnerHTML在填充该框后在电子邮件文本框下方拥有一个新的文本框.如果您可以在此处发布代码

,我可以给您代码

本文地址:https://www.itbaoku.cn/post/269695.html

问题描述

Before we begin, I would like to convey that I have limited to no knowledge on the JavaScript language. The only things I've used is JQueryUI - and even that is copy paste.

Currently, I have a user registration page, with all the standard TextBox inputs. I would like to, however, slide down a secondary 'Confirm email' and 'confirm password' whenever a user enters text into the original text box.

I understand the community likes to help those who can prove they helped themselves, but the only thing I currently have to show is me trying to lookup solutions for this and failing.

Could someone please show me a way to do this?

Edit: Code of the password box

<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>

推荐答案

I would add a reference to jquery to the page you are working on. Then make a new script (on the page or in a separate .js file) which attaches a new function to the onkeyup event for the textboxes. Something like this.

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

This will attach this function to all elements corresponding to the "mytextbox" class or ID. So if you have an input <input type="text" id="email" class="emailInput"/> then you would use $('#email') to bind the event to this particular element. Or you use $('.Emailinput') to bind to all input elements for emails.

By the way, I haven't tested the code, but this or something very similar should work.

If you use a separate .js file, then don't forget to reference it in your page as well.

其他推荐答案

So, assuming you can create markup similar to this:

<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>

You'd want to add some CSS rules to make #confirm-password-box hidden by default. Then, add this script code somewhere on the page (preferably as close to closing </body> tag as possible):

<script>

$(function(){

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

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

    });

});

</script>

The blur event occurs when the control loses focus. You don't really want to listen for keyup, since that would require this code being called every time a user entered a character into the password box...

Note that this particular chunk of jQuery code requires jQuery 1.7 or higher, so use NuGet to update your script reference (if you're not using anything else that requires an older version of jQuery).

其他推荐答案

You can use innerHTML to have a new textbox beneath the email textbox once that box is filled. I could give you the code if you can post the code over here

查看更多