JSMask - Máscara em campo texto
Como anunciei no twitter, hoje a tarde criei um plugin para resolver alguns problemas que tínhamos com datas. Basicamente, precisávamos que os campos de datas do sistema tivessem uma máscara.
Já vinha utilizando, em um outro projeto, alguns javascripts. O grande problema que eles são "gordos" e tem muita coisa implementada de forma "estranha".
Então resolvi criar um javascript para resolver o problema. Então surgiu o JSMask 0.1, baseado no LowPro e no Xaprb.InputMask.
Em partes resolvia meu problema, mais não era integrado com Rails. Então mais alguns códigos e surgiu o Plugin JSMask 0.1.
Para demonstrar as funcionalidades do plugin, fiz um pequeno tutorial. Vamos testar ?
Preparando o ambiente
Este tutorial foi baseado no Rails 2.0, então a primeira coisa é verificar se você está utilizando a versão correta:
1 2 |
rails -v Rails 2.0.2 |
Tudo certo então vamos criar nossa aplicação para demonstração:
rails jsmask_demo |
As configurações de banco de dados ficam por conta de vocês. Vamos criar o banco:
rake db:create:all |
Vamos gerar nosso scaffold:
script/generate scaffold Schedule begin:date end:date |
Isto vai gerar os Controller, Helper, Model, Migration e os testes. Agora é só executar os migrations:
rake db:migrate |
Já temos nossa aplicação, com a inserção de datas no padrão do rails:
Instalando o plugin
O plugin está no github e para instalar:
git clone git://github.com/ozeias/js_mask.git vendor/plugins |
Para o Edge Rails (>= 2.1)
script/plugin install git://github.com/ozeias/js_mask.git |
Utilizando o Plugin
Agora é simples, vamos alterar nossas views geradas pelo scaffold e testar o plugin:
1 2 3 4 5 6 |
<!-- app/views/layouts/schedules.html.erb --> ... <title>Schedules: <%= controller.action_name %></title> <%= stylesheet_link_tag 'scaffold' %> <%= javascript_include_tag :defaults, :jsmask %> ... |
1 2 3 4 5 6 7 8 |
<h1>New schedule</h1><!-- app/views/schedules/new.html.erb --> <%= error_messages_for :schedule %> <%= render :partial => @schedule, :locals => { :button_name => "Create"} %> <%= link_to 'Back', schedules_path %> |
1 2 3 4 5 6 7 8 9 10 |
<!-- app/views/schedules/edit.html.erb --> <h1>Editing schedule</h1> <%= error_messages_for :schedule %> <%= render :partial => @schedule, :locals => { :button_name => "Update"} %> <%= link_to 'Show', @schedule %> | <%= link_to 'Back', schedules_path %> |
Vamos criar um partial para ficar DRY e nele inserir a funcionalidade do plugin
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<!-- app/views/schedules/_schedule.html.erb --> <%- form_for(@schedule) do -%> <p> <b>Begin</b><br /> <%= text_field_with_js_mask :schedule, :begin, :class => 'mask_date_iso' -%> </p> <p> <b>End</b><br /> <%= text_field_with_js_mask :schedule, :end, :class => 'mask_date_iso' -%> </p> <p> <%= submit_tag button_name -%> </p> <%- end -%> |
E o resultado:
Os formatos de máscara suportados são:
- date_iso: 2008-05-23
- date_br: 21/05/2008
- time: 10:46:55
- phone: (00)0000-0000
- ssn: 000-00-0000
- visa: 0000-0000-0000-0000
A primeira versão é muito básica, vou fazer alguns ajustes e adicionar novas funcionalidades em breve. Sugestões, dicas e críticas são bem-vindas.
Source code: http://github.com/ozeias/js_mask/tree/master
Exemplo: jsmask_demo.tar.gz
Se o plugin estiver sendo útil para você, não se esqueça de me recomendar no working with rails.
Sorry, comments are closed for this article.
Comentários