How to mask a textbox using jquery?

Question

1.00/5 (1 vote)

See more:

I am trying to mask a textbox using jquery and it has errors. I am using VS2010 ASP.Net Blank Web Form and C#. I have a code that is the html code for the page. What am I doing wrong?

ASP.NET

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Testcommas.aspx.cs" Inherits="TestNumberCommas.Testcommas" %>
<script src="<%=Page.ResolveUrl("~")%>"Style/javascript/jquery-1.7.1.js" type="text/javascript"></script>
<!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="jquery.js" type="text/javascript"></script>
    <script src="jquery.maskedinput.js" type="text/javascript"></script>
    <script type='text/javascript'>
        jQuery(function ($) {
            $("#TextBoxY").mask("999,999,999,999");
        });

    </script>

    <style type="text/css">
        .style1
        {
            width: 100%;
        }
        .style2
        {
            width: 245px;
        }
        .style3
        {
            width: 66px;
        }
    </style>
</head>
<body>
    <form id="form1" runat="server">
    <div>
    
    </div>
    <table class="style1">
        <tr>
            <td class="style3">
                 </td>
            <td class="style2">
                <asp:TextBox ID="TextBoxINST_ID" runat="server"></asp:TextBox>
            </td>
            <td>
                <asp:Button ID="Button1" runat="server" onclick="Button1_Click" Text="Submit" 
                    Width="100px" />
            </td>
        </tr>
        <tr>
            <td class="style3">
                Hourly</td>
            <td class="style2">
                <asp:TextBox ID="TextBoxH" runat="server" Width="180px"></asp:TextBox>
            </td>
            <td>
                 </td>
        </tr>
        <tr>
            <td class="style3">
                Yearly</td>
            <td class="style2">
                <asp:TextBox ID="TextBoxY" runat="server" Width="180px" 
                    AutoCompleteType="Email"></asp:TextBox>
               
            </td>
            <td>
                 </td>
        </tr>
        <tr>
            <td class="style3">
                 </td>
            <td class="style2">
                <asp:TextBox ID="TextBoxadd" runat="server" Width="180px"></asp:TextBox>
            </td>
            <td>
                 </td>
        </tr>
        <tr>
            <td class="style3">
                 </td>
            <td class="style2">
                <asp:TextBox ID="TextBoxadd1" runat="server" Width="180px"></asp:TextBox>
            </td>
            <td>
                 </td>
        </tr>
        <tr>
            <td class="style3">
                 </td>
            <td class="style2">
                <asp:TextBox ID="TextBoxadd2" runat="server" Width="180px"></asp:TextBox>
            </td>
            <td>
                 </td>
        </tr>
        <tr>
            <td class="style3">
                 </td>
            <td class="style2">
                <asp:TextBox ID="TextBoxadd3" runat="server" Width="180px" AutoPostBack="True" 
                    ontextchanged="TextBoxadd3_TextChanged"></asp:TextBox>
            </td>
            <td>
                 </td>
        </tr>
        <tr>
            <td class="style3">
                 </td>
            <td class="style2">
                <asp:TextBox ID="TextBoxadd4" runat="server" Width="180px"></asp:TextBox>
            </td>
            <td>
                 </td>
        </tr>
    </table>
    </form>
</body>
</html>

Posted 10-Jul-14 6:24am

Computer Wiz99

Add a Solution

3 solutions

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

sankarsan parida · Answer 1 · 2014-07-10T06:37:00

Solution 1

try with

<script type='text/javascript'>
       $(document).ready(function(){
            $("#TextBoxY").mask("999,999,999,999");
        });
 
    </script>

Get more info
http://igorescobar.github.io/jQuery-Mask-Plugin/[^]

Posted 10-Jul-14 6:37am

sankarsan parida

Comments

ridoy 10-Jul-14 12:58pm

good one, +4.

Computer Wiz99 10-Jul-14 16:07pm

I am missing this: <script src="jquery.maskedinput-2.1.1.min.js" type="text/javascript"></script>. How can I get it in the Script folder?

[no name] 10-Jul-14 22:29pm

Visual studio menu
Choose Tools
Library Package Manager Console
Manage Nuget Packages for Solution
Choose Online From Ritht Tab
Searcy Jquery on textbox
Install JqueryUI

ridoy · Answer 2 · 2014-07-10T06:57:00

Solution 2

Check:
Mask TextBox ASP.NET Control[^]
HowTo: use jQuery input mask plugin in ASP.NET[^]
ASP.NET Textbox Filter & Masked Edit[^]

Posted 10-Jul-14 6:57am

ridoy

arvind mepani · Answer 3 · 2014-07-12T04:36:00

Solution 3

you can refer this link : http://jsfiddle.net/anomepani/G3uKz/1/[^]

This is achieved using jquery library and jquery masked input
in fiddle example you can also check external resource

Posted 12-Jul-14 4:36am

arvind mepani