Como usar "máscaras" em campos de formulário do Cake com plugin meioMask pra jQuery
Autor: Carlitos | Publicado: 2011-03-07T18:22:00-04:00


Tá precisando colocar umas máscaras em campos de formulário? Não precisa ficar quebrando a cabeça com um monte de javascript. Existem muitos plugins prontos para jQuery e outras bibliotecas.
O plugin meioMask (http://plugins.jquery.com/project/meioMask)&nbsp;é uma excelente iniciativa brazuca do pessoal do MeioCódigo.com. Esse plugin para jQuery é bem flexível, veja como usá-lo em&nbsp;http://www.meiocodigo.com/projects/meiomask/.

Bom, mãos na massa!

1) O primeiro passo é entrar no site do meiomask e baixar a útltima versão estável do script e salvá-lo em: app/webroot/js. No meu caso baixei a versão&nbsp;1.1.3&nbsp;(comprimida) e salvei com o nome "jquery.meio.mask.min.js";


2) Peguei uma view qualquer (escolhi a app/views/users/add.ctp) previamente gerada pelo BAKE que possui um formulário com os seguintes campos: DtNasc, CPF e Hora (não me pergunte pra que raio de cadastro é esse... coloquei só pra exemplificar os casos =]), vejam:
&lt;?php
// ...app/views/users/add.ctp  
...
...
...

  echo $this-&gt;Form-&gt;input('dtnasc',
   array(
    'label' =&gt; 'Data de Nascimento'
   ) 
  );
  echo $this-&gt;Form-&gt;input('cpf',
   array(
    'label' =&gt; 'CPF'
   ) 
  );
  echo $this-&gt;Form-&gt;input('hora',
   array(
    'label' =&gt; 'Hora'
   ) 
  );

...
...
...
?&gt;

3) Agora adiciono o jQuery e o script do plugin meiomask na view, vejam:

&lt;?php
// ...app/views/users/add.ctp
 $javascript-&gt;link(
  array(
   'https://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js',
   'jquery.meio.mask.min'
  ),
 false);
...
...
...
?&gt;

4) Logo em seguida, adicionamos um "bloco de código" setando as máscaras para os campos do formulário usando o ID do campo para isso.
OBS: O&nbsp;Form&nbsp;Helper do Cake sempre gera um ID para cada campo criado seguindo o padrão id="ModelCampo". No nosso caso o model é o User e temos os campos Dtnasc, Cpf e Hora, o que gera os ids: UsersDtnasc, UserCpf e UserHora. O jQuery usa o '#' para referenciar IDs no DOM.
&lt;?php
// ...app/views/users/add.ctp
...
...
...

 $javascript-&gt;codeBlock('
  jQuery(function($){
   $("#UserDtnasc").setMask("39/19/2999");
   $("#UserCpf").setMask("999.999.999-99");
   $("#UserHora").setMask("29:59");
  });
 ', array('inline' =&gt; false));
...
...
...

?&gt;

5) Feito isto é só acessar o .../users/add e verificar o resultado ao entrar com números nos campos. Veja que ele permite apenas a entrada de números e adiciona automaticamente os pontos, barras e etc, que foram setados no molde da máscara. O código final ficou assim:

&lt;?php
// ...app/views/users/add.ctp
 $javascript-&gt;link(
  array(
   'https://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js', 
   'jquery.meio.mask.min'
  ), 
 false);
$javascript-&gt;codeBlock('
  jQuery(function($){
   $("#UserDtnasc").setMask("39/19/2999");
   $("#UserCpf").setMask("999.999.999-99");
   $("#UserHora").setMask("29:59");
  });
 ', array('inline' =&gt; false));
 ?&gt;
&lt;div class="users form"&gt;
&lt;?php echo $this-&gt;Form-&gt;create('User');?&gt;
 &lt;fieldset&gt;
   &lt;legend&gt;&lt;?php __('Add User'); ?&gt;&lt;/legend&gt;
 &lt;?php
  echo $this-&gt;Form-&gt;input('dtnasc', 
   array(
    'label' =&gt; 'Data de Nascimento'
   ) 
  );
  echo $this-&gt;Form-&gt;input('cpf', 
   array(
    'label' =&gt; 'CPF' 
   ) 
  );
  echo $this-&gt;Form-&gt;input('hora', 
   array(
    'label' =&gt; 'Hora' 
   ) 
  );
 ?&gt;
 &lt;/fieldset&gt;
&lt;?php echo $this-&gt;Form-&gt;end(__('Submit', true));?&gt;
&lt;/div&gt;

Eu particularmente uso outro plugin para máscaras (que mostrarei no próximo tópico), mas o meioMask é uma excelente alternativa além de ser brasileiro.

Espero que seja útil! Abração!