Como usar "máscaras" em campos de formulário do Cake com plugin maskedinput pra jQuery
Postado por Carlitos | Tags cakephp , jquery , mascara , maskedinput | 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 =]
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:
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:
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
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
