0

始める前に、私は JavaScript 言語に関する知識がまったくないということを伝えたいと思います。私が使用したのは JQueryUI だけです。それもコピー ペーストです。

TextBox現在、すべての標準入力を備えたユーザー登録ページがあります。ただし、ユーザーが元のテキスト ボックスにテキストを入力するたびに、2 番目の [電子メールの確認] と [パスワードの確認] を下にスライドさせたいと思います。

コミュニティが自分自身を助けたことを証明できる人を助けたいと思っていることは理解していますが、現在私が見せなければならないのは、これに対する解決策を探して失敗したことだけです.

誰かがこれを行う方法を教えてもらえますか?

編集：パスワードボックスのコード

<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
  • 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 に答える
0

ボックスがいっぱいになったら、innerHTML を使用して、電子メールのテキストボックスの下に新しいテキストボックスを作成できます。ここにコードを投稿していただければ、コードを提供できます

于 2012-11-09T07:09:40.033 に答える