Formatação de campo (mascara) com jQuery.

Uma das formas mais fáceis e práticas de definirmos uma formatação em um campo input, a máscara, é utilizarmos uma biblioteca javascript que faça este trabalho para nós.

 E como já existem diversas bibliotecas prontas para isto, vamos utilizar a Masked JQuery Input.

1.  <script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
2.     <script src="http://cdnjs.cloudflare.com/ajax/libs/jquery.maskedinput/1.4.1/jquery.maskedinput.min.js"></script>
3.     <SCRIPT language="javascript">
4.      $(document).ready(function () {
5.      $('#dia').mask('99/99/9999');
6.      $('#cep').mask('99999-999');
9.         return false;
10.     });
11.     </SCRIPT>
12. <form >
13. <input type=text id="dia">
14. <input type=text id="cep">
16. </form>

Neste exemplo nós primeiramente incluímos a biblioteca jquery e a jquery.masked input, que fará a formatação dos campos.

A máscara funcionará obedecendo as seguintes regras:

• a – Representa um caractere alfabético (A-Z, a-z)
• 9 – Representa um carácter numérico (0-9)
• * – Representa um caractere alfanumérico (A-Z, a-z ,0-9)

Lembrando que devemos sempre colocar um id no campo para que seja validado. A formatação ficará assim:

// <input type="text" id="telefone" name="telefone">

$("#telefone").mask("(99) 99999-9999");










Categories: HTML, jQuery, Web Design