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($){
$("#data").mask("99/99/9999",{placeholder:"dd/mm/aaaa"});
$("#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($){
$("#data").mask("99/99/9999",{placeholder:"dd/mm/aaaa"});
$("#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]