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:

$ 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:
js_mask_01

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:

Vamos criar um partial para ficar DRY e nele inserir a funcionalidade do plugin:

E o resultado:
js_mask_02

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.

6 Comments on “JSMask – Máscara em campo texto

  1. Otimo Plugin.
    estava desenvolvendo um aplicativo
    que necessitava de algo assim.
    uma Mão na Roda.
    Otima contribuição para o Mundo Rails!
    parabens!

  2. Cara que bom ! Acabei de receber uma OS justamente sobre isso, fico feliz por estar usando um plug-in que acabou de sair do forno 😀
    Eu tenho que ter conta no working with Rails pra te recomendar ??

  3. Olá Fabiano, que bom que gostou. Para recomendar precisa de uma conta sim, e recomendo criar. Grande Abraço

  4. Ozeias, teuy plugin é otimo, bem pratico. Mas continua sem resolver meu problema, ou entao eu nao soube fazer. Tipo, pra escrever no campo ele formata a data, mas quando chamo pra editar ele traz a data no formato Iso pra ser editado. alguma saida?