3

簡単な.aspxページとそれを使用jquery.maskedinput-1.3.jsしてマスクしたいテキストボックスがあり、ページの .aspx コードは次のとおりです。問題は最初のページの読み込みです。マスクされた入力プラグインを機能させるにはどうすればよいですか? thx事前に。

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script src="Scripts/jquery.js" type="text/javascript"></script>
    <script src="Scripts/jquery.maskedinput-1.3.js" type="text/javascript"></script>
    <script type='text/javascript'>
        jQuery(function ($) {
            $("#txtMembershipCode").mask("999-9999-999-9999");
        });

    </script>
</head>
<body>
    <form id="form1" runat="server">
    <asp:ScriptManager ID="ScriptManager1" runat="server">
    </asp:ScriptManager> 
    <div style="float: right" id="exDiv">
                <asp:UpdatePanel ID="UpdatePanel1" runat="server">
                    <ContentTemplate>
                        <div style="float: right; width: 120px; font-family: Tahoma">
                            membership Code :</div>
                        <div style="float: left">
                            <asp:TextBox ID="txtMembershipCode" runat="server" CssClass="input" ClientIDMode="Static"
                                dir="ltr"></asp:TextBox>
                        </div>
                        <div style="font-family: Tahoma; float: left">
                            <asp:Button ID="btn" runat="server" Text="save" OnClick="btn_Click" CssClass="mybtn" /></div>
                        <div style="font-family: Tahoma; float: right">
                            <asp:UpdateProgress ID="UpdateProgress1" runat="server" AssociatedUpdatePanelID="UpdatePanel1">
                                <ProgressTemplate>
                                    <img src="Images/484.gif" />
                                </ProgressTemplate>
                            </asp:UpdateProgress>
                        </div>
                    </ContentTemplate>
                </asp:UpdatePanel>
    </div>
    </form>
</body>
</html>

私はウェブ上でさまざまな方法を試しましたが、どれも機能していません!

4

2 に答える 2

4

これを解決する1つの方法があります-

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script src="Scripts/jquery.js" type="text/javascript"></script>
    <script src="Scripts/jquery.maskedinput-1.3.js" type="text/javascript"></script>
    <script type='text/javascript'>
        window.onload = function () {
            Sys.WebForms.PageRequestManager.getInstance().add_endRequest(endRequestHandler);
        }

        function endRequestHandler(sender, args) {
            init();
        }

        function init() {
            $("#<%=txtMembershipCode.ClientID %>").mask("999-9999-999-9999");
        }

        $(function() { // DOM ready
            init();
        });
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <asp:ScriptManager ID="ScriptManager1" runat="server">
    </asp:ScriptManager> 
    <div style="float: right" id="exDiv">
                <asp:UpdatePanel ID="UpdatePanel1" runat="server">
                    <ContentTemplate>
                        <div style="float: right; width: 120px; font-family: Tahoma">
                            membership Code :</div>
                        <div style="float: left">
                            <asp:TextBox ID="txtMembershipCode" runat="server" CssClass="input" dir="ltr"></asp:TextBox>
                        </div>
                        <div style="font-family: Tahoma; float: left">
                            <asp:Button ID="btn" runat="server" Text="save" OnClick="btn_Click" CssClass="mybtn" /></div>
                        <div style="font-family: Tahoma; float: right">
                            <asp:UpdateProgress ID="UpdateProgress1" runat="server" AssociatedUpdatePanelID="UpdatePanel1">
                                <ProgressTemplate>
                                    <img src="Images/484.gif" />
                                </ProgressTemplate>
                            </asp:UpdateProgress>
                        </div>
                    </ContentTemplate>
                </asp:UpdatePanel>
    </div>
    </form>
</body>
</html>

このアプローチはSys.WebForms.PageRequestManager JavaScript クラスを使用し、ページにスクリプト マネージャーがあるため可能です.aspx。基本的に、非同期ポストバックごとにinit()関数が呼び出されます。

init()この関数は DOM Ready でも呼び出されることに注意してください。これにより、非同期ポストバック中にコンテンツが変更された後、再度行う必要がある DOM に対してすべてを行うことができます。これを含むさまざまなjQueryプラグインを使用する前に、この手法を使用しました。

于 2013-09-21T19:34:40.937 に答える