Mostrando postagens com marcador meiomask. Mostrar todas as postagens
Mostrando postagens com marcador meiomask. Mostrar todas as postagens

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!