máscaras – Maico Oliveira Buss – Inovação e Tecnologia https://maicobuss.com.br Fri, 16 Jun 2017 00:12:40 +0000 pt-BR hourly 1 https://maicobuss.com.br/wp-content/uploads/2021/03/cropped-Ativo-1-e1614914724625-50x50.png máscaras – Maico Oliveira Buss – Inovação e Tecnologia https://maicobuss.com.br 32 32 Inserindo máscaras em campos de formulário HTML com JavaScript https://maicobuss.com.br/5069/ https://maicobuss.com.br/5069/#respond Thu, 15 Jun 2017 22:38:21 +0000 http://www.maicobuss.com.br/?p=5069 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] ]]> https://maicobuss.com.br/5069/feed/ 0