Uma biblioteca javascript (na verdade um plugin jQuery) que auxilia muito na inserção de máscaras em inputs (campos) de formulários HTML é a Masked Input Plugin.

Uma máscara pode ser definida como um padrão composto por caracteres em posições pré-definidas. Exemplos comuns são máscaras em campos para cadastros de CPF, CEP, telefones entre vários outros.

O Masked Input Plugin foi testado no Internet Explorer, Firefox, Safari, Opera e Chrome.

Para construir as máscaras este plugin utiliza as seguintes regras:

a – Representa um caractere alfabético (AZ, az)
9 – Representa um carácter numérico (0-9)
* – Representa um caractere alfanumérico (AZ, az ,0-9)

Como Utilizar:

Primeiro, inclua os arquivos javascript jQuery e masked input:

<script src="jquery.js" type="text/javascript"></script> 
<script src="jquery.maskedinput.js" type="text/javascript"></script>

 

Em seguida, chame a função de máscara para os campos (inputs) que você deseja ter mascarados:

jQuery(function($){ &nbsp; &nbsp;
$("#data").mask("99/99/9999",{placeholder:"dd/mm/aaaa"}); &nbsp; &nbsp;
$("#celular").mask("(99) 99999-9999"); 
});

 

 Resumo:
<html> 
<head> 
<script src="jquery.js" type="text/javascript"></script> 
<script src="jquery.maskedinput.js" type="text/javascript"></script> 
</head> 
<body> 
... 
<form> 
... 
<input type="text" id="data"> 
<input type="text" id="celular"> 
... 
</form> 
... 
jQuery(function($){ &nbsp; &nbsp;
$("#data").mask("99/99/9999",{placeholder:"dd/mm/aaaa"}); &nbsp; &nbsp;
$("#celular").mask("(99) 99999-9999"); 
}); 

</body> 
</html>

Efetue o download do plugin Masked Input clicando aqui.

Mais informações: http://digitalbush.com/projects/masked-input-plugin/

[wpedon id=5090]

Categorizado em: