9 de out. de 2012

Mascara data, telefone e texto "marca d'aguá" para input html

Uma boa opção para que procura mascarar algum input como uma data ou um telefone é usar as ferramentas do http://www.digitalbush.com/projects

São elas:

 masked-input-plugin

Com esse .js mais a biblioteca jquery é possível criar suas próprias mascaras para campos como telefone e data

Ex.
<script src="jquery.js" type="text/javascript"></script>
<script src="jquery.maskedinput.js" type="text/javascript"></script>
jQuery(function($){
   $("#date").mask("99/99/9999");
   $("#phone").mask("(999) 999-9999");
   $("#tin").mask("99-9999999");
   $("#ssn").mask("999-99-9999");
});

watermark-input-plugin

 Com esse .js é possivel criar um texto padrão dentro de cada input de forma personalizada para cada campo que se queira, o texto aparece com cor mais suave que o texto digitado pelo usuário, e uma ves que o usuário clique para escrever esse texto some,  caso o usuário digite algo no input o texto fica com sua cor normal e permanece, caso não digite ao tirar o foco do input o texto padrão volta a aparecer.

Ex.

<script src="jquery.watermarkinput.js" type="text/javascript"></script>
jQuery(function($){
   $("#email").Watermark("Digite seu email);
   $("#telefone").Watermark("digite seu telefone");

Em caso de duvida deixe seu comentário, obrigado

Nenhum comentário:

Postar um comentário

contribua com uma idéia, escreva aqui: