Today I’m going to exemplify a pretty easy way to put jQuery Mask Plugin to run with Zepto.js instead of jQuery.
What is Zepto.js
Basically, you can switch from jQuery to Zepto.js if it’s too heavy or if it’s too much for your current needs. If you need something more lightweight that allows you to keep your code compatible with your old jQuery’s code, Zepto.js is a match for you.
Zepto is a minimalist JavaScript library for modern browsers with a largely jQuery-compatible API. If you use jQuery, you already know how to use Zepto. While 100% jQuery coverage is not a design goal, the APIs provided match their jQuery counterparts. The goal is to have a ~5-10k modular library that downloads and executes fast with a familiar and versatile API, so you can concentrate on getting stuff done.
– Zepto.js Official Web Site
(\___/)
( ͡ ͡° ͜ ʖ ͡ ͡°)
\╭☞ \╭☞ Follow me on Twitter!
How to
Recently, Igor Lima made a pretty cool contribution to jQuery Mask Plugin making a few tweaks on jQuery Mask Plugin’s code to make it run smoothly with Zepto.js, making things even easier for you.
Since version 0.9.0 all you have to do is:
1 – Load zepto.js between your head TAG (or where ever you want to put it if you know what you’re doing):
<script type="text/javascript" src="http://zeptojs.com/zepto.min.js"></script>Load the Zepto.js data plugin right after Zepto.js:
<script type="text/javascript" src="https://raw.github.com/madrobby/zepto/master/src/data.js"></script>Zepto’s basic implementation of
data()only stores strings. To store arbitrary objects the optional “data” module from custom build of Zepto was included.And then load jQuery Mask Plugin:
<script type="text/javascript" src="https://raw.github.com/igorescobar/jQuery-Mask-Plugin/master/dist/jquery.mask.min.js"></script>All you need to do now is take a look into jQuery Mask Plugin Documentation to learn a little about jQuery Mask Plugin’s API and you’re ready to go!
Did it help you? Support jQuery Mask Plugin!
Igor Escobar 
Oi Igor,
Cara, tem alguma mascara para somente números sem uma quantidade determinado de caracteres?
Tentei esse exemplo $(‘.example’).mask(‘0#’), mas somente deixa digitar até 2 números.
Também tentei usar os translators e colocar um pattern mas sem sucesso…
$(‘.only-number-mask’).mask(‘0’, {‘translation’: { 0 : { pattern: /(\d)+/ }}});
$(‘.only-number-mask’).mask(‘0’, {‘translation’: { 0 : { pattern: /\d+/ }}});
Queria algo que somente permitisse digitar números mas sem limite.
LikeLike
@Dyorg da uma lida na documentação sobre o recurso recursive: true
LikeLike
@Igor, valeu pela rápida resposta….
Não consegui com esse recurso recursive, mas acabei esbarrando em outro exemplo e consegui da seguinte forma.
$(‘.only-number-mask’).mask(‘0#’, {maxlength: false});
valeu 🙂
LikeLike
@Dyorg # = recursive: true 🙂
LikeLike
@Igor hahaha Plugin louco de bom, parabéns!
LikeLike
alguém sabe para remover se os dados for incompleto, exemplo : usuário digitou a metade do cpf: 011.12. ao sair do campo limpa o que ficou incompleto.
LikeLike