JQuery – Como utilizar mascara para aceitar apenas numeros

11 02 2014

Problema

Como limitar os campos para aceitar apenas números ou uma mascara especifica, utilizando JQuery.

Solução

1) Baixar o JQuery Mask plugin e colocar no seu projeto dentro da pasta “js” (nesse caso)

webapp –> MyProject –> js

2) Codigo exemplo utilizando o JQuery online (que pode ser baixado também se preferir)

<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Mask exemplo</title>
</head>
<body>
    <h1>Exemplo de como fazer uma mascara</h1>    
	<form action=""> 
		<label>CPF</label>
      <input type="text" class="cpf"/>
	</form>

	<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
	<script type="text/javascript" src="js/jquery.mask.min.js"></script>

	<script>
		$(document).ready(function(){
			$('.cpf').mask('000.000.000-00', {reverse: true});
		});
	</script>
</body>
</html>

3) Para melhorar, incrementar e para utilizar outros recursos basta continuar lendo a documentação do plugin

Espero ter ajudado, bom trabalho!

Anúncios

Ações

Information

Deixe um comentário

Preencha os seus dados abaixo ou clique em um ícone para log in:

Logotipo do WordPress.com

Você está comentando utilizando sua conta WordPress.com. Sair / Alterar )

Imagem do Twitter

Você está comentando utilizando sua conta Twitter. Sair / Alterar )

Foto do Facebook

Você está comentando utilizando sua conta Facebook. Sair / Alterar )

Foto do Google+

Você está comentando utilizando sua conta Google+. Sair / Alterar )

Conectando a %s




%d blogueiros gostam disto: