Como usar "máscaras" em campos de formulário do Cake com plugin maskedinput pra jQuery

Postado por Carlitos | Tags , , , | Postado em 17:45

0

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 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:
<?php
//... app/views/users/add.ctp
...
  echo $this->Form->input('dtnasc',
   array(
    'label' => 'Data de Nascimento'
   ) 
  );
  echo $this->Form->input('cpf',
   array(
    'label' => 'CPF'
   ) 
  );
  echo $this->Form->input('hora',
   array(
    'label' => 'Hora'
   ) 
  );
...
?>

3) Adiciono os scripts (jQuery e o plugin) na view. Vejam:
<?php
//... app/views/users/add
 $javascript->link(
  array(
   'https://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js', 
   'jquery.maskedinput'
  ), 
 false);
...
?>

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:
<?php
//... app/views/users/add.ctp
...
 $javascript->codeBlock('
  jQuery(function($){
   $("#UserDtnasc").mask("99/99/9999");
   $("#UserCpf").mask("999.999.999-99");
   $("#UserHora").mask("99:99");
  });
 ', array('inline' => false));
...
?>

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:

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

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

Como usar "máscaras" em campos de formulário do Cake com plugin meioMask pra jQuery

Postado por Carlitos | Tags , , , | Postado em 18:22

0


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) é uma excelente iniciativa brazuca do pessoal do MeioCódigo.com. Esse plugin para jQuery é bem flexível, veja como usá-lo em 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 1.1.3 (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:
<?php
// ...app/views/users/add.ctp  
...
...
...

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

...
...
...
?>

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

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

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 Form 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.

<?php
// ...app/views/users/add.ctp
...
...
...

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

?>

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:

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