Após ter descoberto o Formtastic, passei a utilizar o mesmo em todos os projetos aqui na Zigotto. Gosto muito da maneira que ele me permite trabalhar e escrever o código mais limpo e organizado.

E com tudo isso, comecei a me perguntar:

• O Inputs pode ser utlizado junto com o Formtastic?
• Como unir os dois de uma maneira bem simples e continuar usando o Formtastic para trabalhar com os formulários?

Imaginei algo como:

<% semantic_form_for @product do |form| %>
  <%= form.input :price, :mask => :decimal %>
  <%= form.commit_button %>
<% end %>

Gostei! É exatamente isso que eu quero!

Inputs foi atualizado e agora é possível através da opção :mask informar qual o tipo de máscara que você quer inserir no campo do formulário!

Como usar?

1. Instale e configure o Formtastic em seu projeto. Veja como fazer isso aqui.
2. Instale e configure o plugin Inputs. Veja como fazer isso aqui.

Após tudo configurado, é possível se fazer isso:

<% semantic_form_for @customer do |form| %>
  <%= form.input :name %>
  <%= form.input :phone, :mask => :phone %>
  <%= form.input :cpf, :mask => :cpf %>
  <%= form.commit_button %>
<% end %>

Você pode utlizar outras máscaras já definidas:

• phone
• phone-us
• cpf
• cnpj
• date
• date-us
• cep
• time
• cc
• integer
• decimal
• decimal-us
• signed-decimal-us

ou criar a sua própria máscara:

<% semantic_form_for @product do |form| %>
  <%= form.input :year, :mask => '9999' %>
  <%= form.input :phone, :mask => '99-9999-9999' %>
  <%= form.commit_button %>
<% end %>

Inputs utiliza o plugin meioMask para criar as máscaras, demais opções e configurações podem ser vista na própria página do meioMask.

Sugestões, criticas são bem vindas. O código esta no Github, fiquem a vontade para utilizar, modificar e compartilhar

O objetivo é simples! Adicionar mascaras em campos de formulários. Penso em ampliar este plugin, e adicionar outras funcionalidade. Falo mais sobre isso no final do post.

Baseado no plugin JSMask do Oźeas Sant’ana, para prototype, o Inputs foi criado para quem trabalha com jQuery.

Vamos usar:

É necessário que esteja usando jQuery em seu projeto, recomendo o plugin jRails, caso ainda não o tenha instalado:

script/plugin install git://github.com/aaronchi/jrails.git

Agora é só instalar o Inputs:

script/plugin install git://github.com/jtadeulopes/inputs.git

Chamar os arquivos necessários na view:

<%= javascript_include_tag :defaults %>
<%= javascript_include_inputs %>

Agora, no formulário você pode fazer algo como:

<%= masked_text_field(:user, :tel, :size => 13, :mask => '(99)9999-9999') %>

Outros exemplos:

# Data:
<%= masked_text_field(:user, :birth, :mask => '99/99/9999') %>
 
# CPF:
<%= masked_text_field(:user, :cpf, :mask => '999.999.999-99') %>
 
# Campo de preço (dolar)
<%= price_us_text_field(:product, :price, :size => 10) %>

A idéia é ir adicionando outras opções, como calendário para seleção de datas, criar métodos que são mais utilizados para que não seja necessário ficar setando a máscara na criação do campo, etc.

Idéias são bem vindas, todo o código esta no Github, fiquem a vontade para utilizar, modificar e compartilhar!

É isso ai, valeu!