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>

Marek Karbarz · Accepted Answer · 2010-03-01 05:00:26Z

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();

answered Mar 1, 2010 at 5:00

Marek Karbarz

29.4k6 gold badges55 silver badges73 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Eyla Over a year ago

I added CSSClass="phoneNumber" and I update my script but notthing happen when I run the code there is no mask for the asp text box. any advice?? here is my script.................................................. $(document).ready(function() { $.mask.masks = $.extend($.mask.masks, { aspPhone: { mask: '(999)999-9999' } }); $('.phoneNumber').setMask(); });

Marek Karbarz Over a year ago

looking back at your code the first part $('input:text').setMask() alone should be sufficient since asp:TextBox will render as <input type="text" />. What happens if you remove the second $(document).read() function (which, btw, there's no need to have 2 functions specified)

Eyla Over a year ago

I removed the second one and put back $('input:text').setMask() but still nothing happen.. any advice, Regards,

Leo · Accepted Answer · 2011-11-19 15:32:49Z

1

hello you missed the main cause dude. use alt attribute in any control. masking will work according to it. whether in asp or html. like: <asp:TextBox ID="aspPhone" runat="server" alt="phone-us"></asp:TextBox>

Thanks.

edited Nov 19, 2011 at 15:32

Leo

38.3k8 gold badges78 silver badges102 bronze badges

answered Jan 17, 2011 at 5:39

user578099

111 bronze badge

Comments

Cᴏʀʏ · Accepted Answer · 2010-03-01 05:11:55Z

0

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();

answered Mar 1, 2010 at 5:11

Cᴏʀʏ

108k20 gold badges169 silver badges201 bronze badges

1 Comment

Eyla Over a year ago

Thank you for trying helping me. I tried both ways but nothing work there is no mask any advice?

alextercete · Accepted Answer · 2012-03-23 17:10:29Z

0

Since the meioMask plugin works with the "alt" HTML attribute, you have to set it in order for it to work. This would do the trick:

$('#<%= aspPhone.ClientID %>').attr('alt', 'phone').setMask();

answered Mar 23, 2012 at 17:10

alextercete

5,2113 gold badges24 silver badges38 bronze badges

Collectives™ on Stack Overflow

jquery meio mask with asp.net textbox

4 Answers 4

3 Comments

Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

3 Comments

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related