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" "">

<html xmlns="">
<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 () {

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


  • 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