jquery meio mask with asp.net textbox

Question

I'm trying to use jquery meio mask with asp.net page.

it is working ok with input text box but I do not know how to use it it with asp.net text box.

when I run my code the html text box is only working.

please advice?

http://www.meiocodigo.com/projects/meiomask/

here is my code: ..........................................

<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">

    <script src="../js/jquery-1.4.1.js" type="text/javascript"></script>
    <script src="../js/jquery.meio.mask.js" type="text/javascript"></script>

    <script type="text/javascript" charset="utf-8">
        $(document).ready(function() {
            $.mask.masks = $.extend($.mask.masks, {
            htmlPhone: { mask: '(999)999-9999' }

            });
            $('input:text').setMask();
        });


        $(document).ready(function() {
            $.mask.masks = $.extend($.mask.masks, {
                aspPhone: { mask: '(999)999-9999' }

            });
            $('asp:TextBox').setMask();
        });


    </script>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">


     <p><label for="phone">ASP Phone #</label><br /><asp:TextBox ID="aspPhone" runat="server"></asp:TextBox></p>

     <p><label for="phone">HTML Phone #</label><br /><input type="text" name="htmlPhone" value="" id="phone" alt="phone" /></p>




</asp:Content>

Answer 1

Since asp:TextBox tag is not available to jQuery (if you were to examine your page source in Firefox or IE you wouldn't see it), what you will want to do is either give the TextBox a css class that you could use with jQuery or supply jQuery with a valid ClientID for the textbox. I would choose the css route, in which case you can change the TextBox declaration to something like

<asp:TextBox ID="aspPhone" runat="server" CSSClass="phoneNumber" />

and your jQuery code to

$('.phoneNumber').setMask();

Answer 2

An ASP.NET textbox created with <asp:TextBox> is still going to render as <input type="text" ...>.

Leave your jQuery as it was:

$('input:text').setMask();

Or if you really want to only apply it to that one field, you can use its ID like this:

$('#<%= aspPhone.ClientID %>').setMask();