Skip to content

Instantly share code, notes, and snippets.

@fnalin

fnalin/_jQueryMaskPlugin-Demo.html

Last active August 29, 2015 14:03
Show Gist options
  • Save fnalin/f3c8b84a1184f806c523 to your computer and use it in GitHub Desktop.
Save fnalin/f3c8b84a1184f806c523 to your computer and use it in GitHub Desktop.
Download ZIP
Demo c/ jQuery Mask Plugin
Raw
_jQueryMaskPlugin-Demo.html
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<title>Demo</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="http://ajax.aspnetcdn.com/ajax/modernizr/modernizr-2.7.2.js"></script>
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" />
<style>
body{
padding-top: 50px;
}
.col-centered{
float: none;
margin: 0 auto;
}
</style>
</head>
<body>
<div class="container">
<div class="text-center">
<h1>Máscaras</h1>
<p class="lead">Exemplo usando o jQuery Mask Plugin.</p>
</div>
<br>
<div class="row">
<div class="col-md-8 col-centered">
<div class="col-md-6">
<div class="form-group">
<label for="">Data</label>
<input type="input" class="form-control date" id="">
</div>
<div class="form-group">
<label for="">CPF</label>
<input type="input" class="form-control cpf-one" id="">
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label for="">Celular</label>
<input type="text" class="form-control sp_celphones" maxlength="15" autocomplete="off">
</div>
<div class="form-group">
<label for="">CPF-2</label>&nbsp;(<em><span>com reverse - digite com caracteres a menos</span></em>)
<input type="input" class="form-control cpf-two" id="">
</div>
</div>
</div>
</div>
</div>
<hr>
<footer class="text-center">
<p>&copy; 2014 - Rodapé</p>
</footer>
</body>
</html>
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script src="jquery.mask.min.js"></script>
<script>
$(document).ready(function(){
//url http://igorescobar.github.io/jQuery-Mask-Plugin/
$('.date').mask('00/00/0099');
$(".sp_celphones").mask('90000-0000', {placeholder: "_____-____",clearIfNotMatch: true, reverse: true});
$('.cpf-one').mask('000.000.000-00');
$('.cpf-two').mask('000.000.000-00', {reverse: true});
$('.date_time').mask('00/00/0000 00:00:00');
$('.cep').mask('00000-000');
$('.phone').mask('0000-0000');
$('.phone_with_ddd').mask('(00) 0000-0000');
$('.phone_us').mask('(000) 000-0000');
$('.mixed').mask('AAA 000-S0S');
$('.ip_address').mask('099.099.099.099');
$('.percent').mask('##0,00%', {reverse: true});
$('.clear-if-not-match').mask("00/00/0000", {clearIfNotMatch: true});
$('.placeholder').mask("00/00/0000", {placeholder: "__/__/____"});
});
</script>
Raw
jquery.mask.min.js
// jQuery Mask Plugin v1.6.5
// github.com/igorescobar/jQuery-Mask-Plugin
(function(g){"function"===typeof define&&define.amd?define(["jquery"],g):g(window.jQuery||window.Zepto)})(function(g){var z=function(b,f,d){var l=this,x,y;b=g(b);f="function"===typeof f?f(b.val(),void 0,b,d):f;l.init=function(){d=d||{};l.byPassKeys=[9,16,17,18,36,37,38,39,40,91];l.translation={0:{pattern:/\d/},9:{pattern:/\d/,optional:!0},"#":{pattern:/\d/,recursive:!0},A:{pattern:/[a-zA-Z0-9]/},S:{pattern:/[a-zA-Z]/}};l.translation=g.extend({},l.translation,d.translation);l=g.extend(!0,{},l,d);y=
c.getRegexMask();b.each(function(){!1!==d.maxlength&&b.attr("maxlength",f.length);d.placeholder&&b.attr("placeholder",d.placeholder);b.attr("autocomplete","off");c.destroyEvents();c.events();var a=c.getCaret();c.val(c.getMasked());c.setCaret(a+c.getMaskCharactersBeforeCount(a,!0))})};var c={getCaret:function(){var a;a=0;var e=b.get(0),c=document.selection,e=e.selectionStart;if(c&&!~navigator.appVersion.indexOf("MSIE 10"))a=c.createRange(),a.moveStart("character",b.is("input")?-b.val().length:-b.text().length),
a=a.text.length;else if(e||"0"===e)a=e;return a},setCaret:function(a){if(b.is(":focus")){var e;e=b.get(0);e.setSelectionRange?e.setSelectionRange(a,a):e.createTextRange&&(e=e.createTextRange(),e.collapse(!0),e.moveEnd("character",a),e.moveStart("character",a),e.select())}},events:function(){b.on("keydown.mask",function(){x=c.val()});b.on("keyup.mask",c.behaviour);b.on("paste.mask drop.mask",function(){setTimeout(function(){b.keydown().keyup()},100)});b.on("change.mask",function(){b.data("changeCalled",
!0)});b.on("blur.mask",function(a){a=g(a.target);a.prop("defaultValue")!==a.val()&&(a.prop("defaultValue",a.val()),a.data("changeCalled")||a.trigger("change"));a.data("changeCalled",!1)});b.on("focusout.mask",function(){d.clearIfNotMatch&&!y.test(c.val())&&c.val("")})},getRegexMask:function(){var a=[],e,b,c,d,k;for(k in f)(e=l.translation[f[k]])?(b=e.pattern.toString().replace(/.{1}$|^.{1}/g,""),c=e.optional,(e=e.recursive)?(a.push(f[k]),d={digit:f[k],pattern:b}):a.push(c||e?b+"?":b)):a.push("\\"+
f[k]);a=a.join("");d&&(a=a.replace(RegExp("("+d.digit+"(.*"+d.digit+")?)"),"($1)?").replace(RegExp(d.digit,"g"),d.pattern));return RegExp(a)},destroyEvents:function(){b.off("keydown.mask keyup.mask paste.mask drop.mask change.mask blur.mask focusout.mask").removeData("changeCalled")},val:function(a){var e=b.is("input");return 0<arguments.length?e?b.val(a):b.text(a):e?b.val():b.text()},getMaskCharactersBeforeCount:function(a,e){for(var b=0,c=0,d=f.length;c<d&&c<a;c++)l.translation[f.charAt(c)]||(a=
e?a+1:a,b++);return b},determineCaretPos:function(a,b,d,h){return l.translation[f.charAt(Math.min(a-1,f.length-1))]?Math.min(a+d-b-h,d):c.determineCaretPos(a+1,b,d,h)},behaviour:function(a){a=a||window.event;var b=a.keyCode||a.which;if(-1===g.inArray(b,l.byPassKeys)){var d=c.getCaret(),f=c.val(),n=f.length,k=d<n,p=c.getMasked(),m=p.length,q=c.getMaskCharactersBeforeCount(m-1)-c.getMaskCharactersBeforeCount(n-1);p!==f&&c.val(p);!k||65===b&&a.ctrlKey||(8!==b&&46!==b&&(d=c.determineCaretPos(d,n,m,q)),
c.setCaret(d));return c.callbacks(a)}},getMasked:function(a){var b=[],g=c.val(),h=0,n=f.length,k=0,p=g.length,m=1,q="push",s=-1,r,u;d.reverse?(q="unshift",m=-1,r=0,h=n-1,k=p-1,u=function(){return-1<h&&-1<k}):(r=n-1,u=function(){return h<n&&k<p});for(;u();){var v=f.charAt(h),w=g.charAt(k),t=l.translation[v];if(t)w.match(t.pattern)?(b[q](w),t.recursive&&(-1===s?s=h:h===r&&(h=s-m),r===s&&(h-=m)),h+=m):t.optional&&(h+=m,k-=m),k+=m;else{if(!a)b[q](v);w===v&&(k+=m);h+=m}}a=f.charAt(r);n!==p+1||l.translation[a]||
b.push(a);return b.join("")},callbacks:function(a){var e=c.val(),g=c.val()!==x;if(!0===g&&"function"===typeof d.onChange)d.onChange(e,a,b,d);if(!0===g&&"function"===typeof d.onKeyPress)d.onKeyPress(e,a,b,d);if("function"===typeof d.onComplete&&e.length===f.length)d.onComplete(e,a,b,d)}};l.remove=function(){var a=c.getCaret(),b=c.getMaskCharactersBeforeCount(a);c.destroyEvents();c.val(l.getCleanVal()).removeAttr("maxlength");c.setCaret(a-b)};l.getCleanVal=function(){return c.getMasked(!0)};l.init()};
g.fn.mask=function(b,f){this.unmask();return this.each(function(){g(this).data("mask",new z(this,b,f))})};g.fn.unmask=function(){return this.each(function(){try{g(this).data("mask").remove()}catch(b){}})};g.fn.cleanVal=function(){return g(this).data("mask").getCleanVal()};g("*[data-mask]").each(function(){var b=g(this),f={};"true"===b.attr("data-mask-reverse")&&(f.reverse=!0);"false"===b.attr("data-mask-maxlength")&&(f.maxlength=!1);"true"===b.attr("data-mask-clearifnotmatch")&&(f.clearIfNotMatch=
!0);b.mask(b.attr("data-mask"),f)})});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment