JSMask - Máscara em campo texto

Posted by Ozéias Sant'ana
May 23rd, 2008

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:

default date in 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:

date in jsmask

Os formatos de máscara suportados são:

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.

Ruby On Rails