Como usar "máscaras" em campos de formulário do Cake com plugin maskedinput pra jQuery
Autor: Carlitos | Publicado: 2011-03-08T17:45:00-04:00

No post anterior mostrei como usar "máscaras" em campos de formulário do Cake com plugin meioMask pra jQuery. Hoje vou mostrar um outro plugin que faz basicamente a mesma coisa, porém ele mostra a "máscara", digamos assim, assim que damos um focus no campo. Por isso gosto e uso muito ele. Trata-se do maskedinput (http://digitalbush.com/projects/masked-input-plugin/).

Bom, antes de começar dá um play nesse som =]1) Primeiramente fazemos o download do plugin maskedinput através do link&nbsp;http://digitalbush.com/projects/masked-input-plugin/. Eu baixei a versão 1.2.2 minified. Salvando o script em app/webroot/js;

2) Em uma view qualquer (escolhi a app/views/users/add.ctp) gerada via BAKE eu criei três campos: dtNasc, cpf e hora. 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) Adiciono os scripts (jQuery e o plugin) na view. Vejam:&lt;?php
//... app/views/users/add
 $javascript-&gt;link(
  array(
   'https://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js', 
   'jquery.maskedinput'
  ), 
 false);
...
?&gt;

4) Conforme falei no post anterior usaremos os IDs dos campos para que o jQuery "os encontre" no DOM. Então setamos as máscaras para cada campo, para isto usamos a função mask(). Vejam:&lt;?php
//... app/views/users/add.ctp
...
 $javascript-&gt;codeBlock('
  jQuery(function($){
   $("#UserDtnasc").mask("99/99/9999");
   $("#UserCpf").mask("999.999.999-99");
   $("#UserHora").mask("99:99");
  });
 ', array('inline' =&gt; false));
...
?&gt;

5) Pronto! Simples não? Repare que ao colocar o cursor do mouse sobre os campos a "máscara" já é mostrada. Isso facilita muito para o usuário, uma vez que ele já prevê como os valores serão formatados (mascarados). Vejam o código final da view:

&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.maskedinput'
  ), 
 false);&nbsp;
 $javascript-&gt;codeBlock('
  jQuery(function($){
   $("#UserDtnasc").mask("99/99/9999");
   $("#UserCpf").mask("999.999.999-99");
   $("#UserHora").mask("99:99");
  });
 ', 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;

Bom, espero que tenham gostado! Apesar de ser "perfumaria", muitas vezes os recursos de máscara facilitam a vida do usuário. Só não pode esquecer de tratar os dados no server-side, pois o usuário pode estar com o javascript desabilitado, ok? =P