Masked Input Plugin无法正常工作

时间:2014-02-28 19:51:58

标签: javascript jquery asp.net masking

编辑:我找到了解决此问题的答案 How to make JQuery masked-input plugin working after AsyncPostback in asp.net Ajax Update pannel?

我正在使用这个插件 http://digitalbush.com/projects/masked-input-plugin/

我的参考:

<script src='<%# ResolveUrl("~/Scripts/jquery-maskedInput-1.3.1.js")%>' type="text/javascript"></script>

我在剧本中有我的功能

    $(function () {
        $('<%= txtPhoneNum.ClientID %>').mask("(999) 999-9999");
               });

和我的文本框控件在窗格/ updatepanel / contentTemplate

<asp:Panel ID="PanelAddPhoneNumber" runat="server" Style="display: none; min-width: 500px; min-height: 500px;" Title="Add Phone Numbers">
    <asp:UpdatePanel ID="UpdatePanelAddPhoneNums" runat="server" UpdateMode="Always">
        <ContentTemplate>

            <table>
                <tr>
                    <td>
                        <asp:Label ID="Label21" runat="server" Text="Phone Type:" />
                    </td>
                    <td>
                        <asp:DropDownList runat="server" ID="dropDownListPhoneType" />
                    </td>
                </tr>
                <tr>
                    <td>
                        <asp:Label ID="Label28" runat="server" Text="Phone Number:" />
                    </td>
                    <td>
                        <asp:TextBox runat="server" ID="txtPhoneNum" type="text" AutoPostBack="true" Width="300" />
                    </td>
                </tr>
            </table>
            <div style="text-align: center;">
                <br />
                <br />
                <br />
                <asp:Button ID="btnAddPhoneNum" runat="server" OnClientClick="ButtonCancelClient();" OnClick="btnAddPhoneNum_Click" Text="Add" />
                <asp:Button ID="btnCancelPhoneNum" runat="server" OnClientClick="ButtonCancelClient();" OnClick="btnCancelPhoneNum_Click" Text="Cancel" />
                <asp:Button ID="btnDeletePhoneNum" runat="server" OnClick="btnDeletePhoneNum_Click" Text="Delete" Visible="false" OnClientClick="check();" />
            </div>
        </ContentTemplate>
        <Triggers>
            <asp:AsyncPostBackTrigger ControlID="btnAddPhoneNum" EventName="Click" />
            <asp:AsyncPostBackTrigger ControlID="btnCancelPhoneNum" EventName="Click" />
        </Triggers>
    </asp:UpdatePanel>
</asp:Panel>

但是当我点击我的txtPhone控件时,没有任何掩码或任何东西......它什么都不做。

我尝试将函数中的名称从txtPhone.ClientID更改为txtPhone,我认为它可能是引用,但它不是因为我在同一文件夹中使用了5个其他对.js文件的引用而且它们正在工作,我的参考拼写正确,但我真的不知道为什么这不起作用。

这些都是项目中使用的.js     F              'rel =“stylesheet”         type =“text / css”runat =“server”/&gt;     'rel =“stylesheet”         type =“text / css”runat =“server”/&gt;             'rel =“stylesheet”         type =“text / css”runat =“server”/&gt;     'type =“text / javascript”&gt;     'type =“text / javascript”&gt;         'type =“text / javascript”&gt;     'type =“text / javascript”&gt;

    <script src='<%# ResolveUrl("~/Scripts/jquery-ui-1.10.1.custom.min.js")%>' type="text/javascript"></script>

        <script src='<%# ResolveUrl("~/Scripts/jquery-maskedInput-1.3.1.js")%>' type="text/javascript"></script>

1 个答案:

答案 0 :(得分:1)

确保加载CORE jQuery库和UI库:

首先必须加载这些库:(这些只是一个例子,使用你喜欢的任何版本但你需要加载jQuery)

  <script src="//code.jquery.com/jquery-1.9.1.js"></script>
  <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>

这是不正确的:

 $(function () {
    $('<%= txtPhoneNum.ClientID %>').mask("(999) 999-9999");
           });

您需要使用并需要使用#:

来优先使用elementId
$( document ).ready(function() {
    $('#<%= txtPhoneNum.ClientID %>').mask("(999) 999-9999");
});

确保你正在加载jquery库而不仅仅是MASKED插件我不认为你这样做。