segunda-feira, 12 de março de 2012

Masks using jQuery

Hello guys...
I'm learning jQuery and I'm going to show a basic example using jQuery where we going to put masks in 4 textboxs.


See the form:

You need to download 2 files to use the jQuery:

After the download done, create a new folder on your project and put the files you've  downloaded:

Now, let's go to implement your source code:


<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="WebApplication1.WebForm1" %>

<!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 id="Head1" runat="server">
    <title>Untitled Page</title>
    <script type="text/javascript" src="js/jquery-1.2.6.pack.js"></script>
    <script type="text/javascript" src="js/jquery.maskedinput-1.1.4.pack.js"/></script>

    <script type="text/javascript">
        $(document).ready(function () {
            $("#telefone").mask("(99)9999-9999");
            $("#cpf").mask("999.999.999-99");
            $("#rg").mask("99.999.999-a");
            $("#cep").mask("99999-999");
        });
    </script>

</head>
<body>
 
  <form id="form1" runat="server">
    <table>
    <tr>
        <td><asp:Label ID="Label1" runat="server" Text="Telefone"></asp:Label></td>
        <td><asp:TextBox ID="telefone" runat="server"></asp:TextBox></td>
    </tr>
    <tr>
        <td><asp:Label ID="Label2" runat="server" Text="CPF"></asp:Label></td>
        <td><asp:TextBox ID="cpf" runat="server"></asp:TextBox></td>
    </tr>
    <tr>
        <td><asp:Label ID="Label4" runat="server" Text="Cep"></asp:Label></td>
        <td><asp:TextBox ID="cep" runat="server"></asp:TextBox> </td>
    </tr>
    <tr>
        <td><asp:Label ID="Label3" runat="server" Text="Rg"></asp:Label></td>
        <td><asp:TextBox ID="rg" runat="server"></asp:TextBox> </td>
    </tr>
    </table>
  </form>
</body>
</html>

Note:

  • The ID of your jquery script need to be the same name of your textbox;
    • Example ->  textbox:  rg  jquery $("#rg").mask("999.999.999-99");
The result:

I know that's very simple, but I believe that will help many people.
See you guys in the next post =)

Nenhum comentário:

Postar um comentário