View on GitHub

Arcnet Simple Mask

A simple jquery mask for use in your project
download .ZIPdownload .TGZ

Arcnet Simple Mask Plugin

A jQuery Plugin to make masks on form fields and HTML elements with some mask defined.

Demo


<input type="text" data-inputmask="###-####-###" />
<input type="text" data-inputmask="celular" />
<input type="text" data-inputmask="cellphone" />
<input type="text" data-inputmask="cnpj"/>
<input type="text" data-inputmask="cpf"/>
<input type="text" data-inputmask="phone"/>
<input type="text" data-inputmask="telefone"/>
<input type="text" data-inputmask="fax"/>
<input type="text" data-inputmask="ncm"/>
<input type="text" data-inputmask="dinheiro"/>
<input type="text" data-inputmask="money"/>
(Not real time typing)
<input type="text" data-inputmask="dinheiro3"/>
<input type="text" data-inputmask="money3"/>
(Real time typing)
<input type="text" data-inputmask="date"/>
<input type="text" data-inputmask="data"/>
<input type="text" data-inputmask="time"/>
<input type="text" data-inputmask="tempo"/>
<input type="text" data-inputmask="date_time"/>
<input type="text" data-inputmask="data_hora"/>
<input type="text" data-inputmask="cep"/>
<input type="text" data-inputmask="percent"/>
<input type="text" data-inputmask="porcentagem"/>


<input type="text" data-inputmask-restrict="numbers"/>
<input type="text" data-inputmask-restrict="numeros"/>
Receives only numbers.
<input type="text" data-inputmask-restrict="letters"/>
<input type="text" data-inputmask-restrict="letras"/>
Receives only letters.
<input type="text" data-inputmask-restrict="alphanumeric"/>
<input type="text" data-inputmask-restrict="alfanumerico"/>
Receives only alphanumeric.
<input type="text" data-inputmask-restrictwords="qwerty"/>
Restricts the words in parameter.
<input type="text" data-inputmask-acceptwords="qwerty"/>
Accepts only the words in parameter.
$(document).ready(function(){
  $('element').arcnetmaskrestricts('numbers');
  $('element').arcnetmaskrestricts('numeros');
  $('element').arcnetmaskrestricts('letters');
  $('element').arcnetmaskrestricts('letras');
  $('element').arcnetmaskrestricts('alphanumeric');
  $('element').arcnetmaskrestricts('alfanumerico');
  $('element').arcnetmaskrestricts('restrictWords', "words");
  $('element').arcnetmaskrestricts('acceptWords', "words");
}

Compatibility

Jquery Arcnet Simple Mask Plugin has been tested with jQuery 1.7+ on all major browsers:

Basic Javascript Usage Examples

$(document).ready(function(){
  $('element').arcnetmask('11/11/1111'); //Date
  $('element').arcnetmask('00:00:00'); //Time
  $('element').arcnetmask('00/00/0000 00:00:00'); //Date_Time
  $('element').arcnetmask('00000-000'); //Cep
  $('element').arcnetmask('0000-0000'); //Phone
  $('element').arcnetmask('(00) 0000-0000'); //Phone_DDD
  $('element').arcnetmask('AAA 000-S0S');
  $('element').arcnetmask('000.000.000-00', {reverse: true}); //Cpf
  $('element').arcnetmask('000.000.000.000.000,00', {reverse: true}); //Money
  $('element').arcnetmask("#.##0,00", {reverse: true, maxlength: false}); //Money
  $('element').arcnetmask('##0,00%', {reverse: true}); //Percent
}


$(document).ready(function(){
  $('element').arcnetmask('cnpj');
  $('element').arcnetmask('cpf');
  $('element').arcnetmask('telefone');
  $('element').arcnetmask('phone');
  $('element').arcnetmask('fax');
  $('element').arcnetmask('ncm');
  $('element').arcnetmask('data');
  $('element').arcnetmask('date');
  $('element').arcnetmask('hora');
  $('element').arcnetmask("time");
  $('element').arcnetmask('data_hora');
  $('element').arcnetmask('date_time');
  $('element').arcnetmask('cep');
  $('element').arcnetmask('porcentagem');
  $('element').arcnetmask('percent');
  $('element').arcnetmask('dinheiro');
  $('element').arcnetmask('money');
  $('element').arcnetmask('dinheiro3');
  $('element').arcnetmask('money3');
}


$(document).ready(function(){
  $('element').arcnetunmask();
}

Reverse Attribute

With this attribute the mask will be placed from the right to the left (that's why reverse:true is defined).

$(document).ready(function(){
  $('element').arcnetmask('##0,00%', {reverse: true});
}

Maxlength Attribute

With this attribute you can define the size of the input, how many numbers can be inserted.

$(document).ready(function(){
  $('element').arcnetmask('money3', {maxlength: 6});
}

ThreeDecimals Attribute

$(document).ready(function(){
  $('element').arcnetmask('money3', {threedecimals: true});
}

With this attribute you can define if you want to use three or two decimals, by default, it will come "false", in other words, two decimals.