Meio Código

Notice

This project wont be continued. Instead theres a Mootools version that is way more stable and complete.

I’ve done this because i realized that with Mootools i can organize my code better. Take a look at the code of both the jQuery and Mootools versions so you can understand what i mean.

How to use

meioMask for Mootools!

meioMask’s page at jquery.com

meioMask’s Git project page

Menu

• Download it!
• Features
• Compatibility
• Usage
• Options
• FixedChars
• Rules
• Masks
• Demos
  • Standalone
  • With Metadata Plugin
  • Paste Feature
  • Change on-the-fly
  • The $.mask.string() Function
  • Applied to a Readonly Input
  • The Callbacks
  • Signed Reverse Masks
  • The ‘repeat’ Mask Type
• Changelog
• License
• Post Comment

meioMask download

• Download meioMask 1.1.3
• Download meioMask compressed 1.1.3 (YUI Compressor)

Encoding is important if you are going to use the mask with special characters like áéã (rule ‘@’, see below for more). If you are going to allow these characters at your masked inputs and your page enconding is not UTF8, then you should add the charset attribute with value UTF8 to your script tag, like so:

<script type="text/javascript" src="jquery.meiomask.js" charset="utf-8"></script>

meioMask features

• Accepts paste event;
• Has fixed and reverse mask types ( allow number mask );
• You can still use your hotkeys and others (ex: ctrl+t, ctrl+f5, TAB …);
• Supports metadata plugin;
• Works with iPhone;
• Allow default values;
• Has callbacks for invalid inputs, valid and overflow;
• Has function to mask strings;
• And much more!

meioMask compatibility

meioMask has been tested with jQuery 1.2.6 and 1.3.x on all major browsers:

• Firefox2, Firefox3, Firefox3.5 (Win, Mac, Linux);
• IE6, IE7, IE8 (Win);
• Chrome (Win, Mac, Linux);
• Safari3.2, Safari4 (Win, Mac, iPhone, yes, it supports iPhone!);
• Opera (Win, Mac, Linux).

meioMask usage

It’s a snap to use:

<!--include jquery library and meioMask plugin -->
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.meiomask.js" charset="utf-8" ></script></p>

<script type="text/javascript" >
  (function($){
    // call setMask function on the document.ready event
      $(function(){
        $('input:text').setMask();
      }
    );
  })(jQuery);
</script>

<p>

meioMask options

It just has the options bellow that will be applyed by default if you don’t specify any.

$.mask.options = options : {
attr: 'alt', // an attr to look for the mask name or the mask itself
mask: null, // the mask to be used on the input
type: 'fixed', // the mask of this mask
maxLength: -1, // the maxLength of the mask
defaultValue: '', // the default value for this input
textAlign: true, // to use or not to use textAlign on the input
selectCharsOnFocus: true, //selects characters on focus of the input
setSize: false, // sets the input size based on the length of the mask (work with fixed and reverse masks only)
autoTab: true, // auto focus the next form element
fixedChars : '[(),.:/ -]', // fixed chars to be used on the masks.
onInvalid : function(){},
onValid : function(){},
onOverflow : function(){}
};

meioMask fixed characters

FixedChars, as the name says, are the fixed characters that you will have on your mask. For example if you mask is ‘99/99/99′ you will probably want to have the ‘/’ to be a fixedChar. So the fixedChars value can be ‘[/]‘.

By default meiomask has some fixed characters that can be used to make the masks. You can change the regular expression that matches the fixed chars by changing the ‘fixedChars’ string. The default one is ‘[(),.:/ -]‘.

meioMask rules

Rules are symbolic characters that match a certain regular expression. meioMask has some defined rules but you may add yours to the rules object.

Making masks will be explained further, and you’ll understand how to glue all this stuff .

meioMask defined rules:

$.mask.rules =  {
'z': /[a-z]/,
'Z': /[A-Z]/,
'a': /[a-zA-Z]/,
'*': /[0-9a-zA-Z]/,
'@': /[0-9a-zA-ZçÇáàãéèíìóòõúùü]/
};

!! There are still the number rules. They will be created ‘on-the-fly’ so if you create a rule that is a number it will be overwritten!

Number rules are:

$.mask.rules =  {
'0': /[0]/,
'1': /[0-1]/,
'2': /[0-2]/,
'3': /[0-3]/,
'4': /[0-4]/,
'5': /[0-5]/,
'6': /[0-6]/,
'7': /[0-7]/,
'8': /[0-8]/,
'9': /[0-9]/
};

meioMask masks

Defined masks:

$.mask.masks : {
'phone'     : { mask : '(99) 9999-9999' },
'phone-us'  : { mask : '(999) 9999-9999' },
'cpf'       : { mask : '999.999.999-99' },
'cnpj'      : { mask : '99.999.999/9999-99' },
'date'      : { mask : '39/19/9999' }, //uk date
'date-us'   : { mask : '19/39/9999' },
'cep'       : { mask : '99999-999' },
'time'      : { mask : '29:69' },
'cc'        : { mask : '9999 9999 9999 9999' }, //credit card mask
'integer'   : { mask : '999.999.999.999', type : 'reverse' },
'decimal'   : { mask : '99,999.999.999.999', type : 'reverse', defaultValue: '000' },
'decimal-us'    : { mask : '99.999,999,999,999', type : 'reverse', defaultValue: '000' },
'signed-decimal'    : { mask : '99,999.999.999.999', type : 'reverse', defaultValue : '+000' },
'signed-decimal-us' : { mask : '99,999.999.999.999', type : 'reverse', defaultValue : '+000' }
}

$.mask.masks.msk = {mask: '999'}

<input type="text" alt="msk" />

All the options from the plugin are accepted to be used at a mask you define.

If you want to add more than one mask it will be better to do this:

$.mask.masks = $.extend($.mask.masks,{
msk:{ mask: '999' },
other_msk:{ mask: '6666' },
another_one:{ mask: '7777' , type:'reverse' }
});

meioMask demos

standalone

<input type="text" id="cc" name="cc" alt="cc" />

<input type="text" id="time_example" alt="time" />

<input type="text" id="decimal" value="12345" name="some_name" alt="decimal" />

meioMask paste feature demo

We now will see the paste feature of this plugin, and how nice it is. I want you to copy some texts and paste them on the input. You’ll see that it just pastes what is corret for the field.

<input type="text" id="phone" name="phone" alt="phone" />

They will all give the same result! Imagine your visitor using it! It’s the way he want’s it to be!

with metadata plugin

You can always change metadata plugin settings. See they’re page for more information.

Metadata Plugin page

Metadata will always overwrite the ‘attr’ value. Look these examples to make it more clear.

<input type="text" id="metadata1" class="{mask:'555-666'}"  alt="(99) 666" />

<input type="text" id="metadata1" class="{mask:'555-666'}"  alt="phone" />

<input type="text" class="{mask:'666-888'}" />

change mask on-the-fly

<input type="text" id="change_mask" alt="(99) 666" maxlength="10" />

$('#change_mask').setMask('***:***').val('');

mask string example

<input type="text" id="dump_input" />

              (function($) {
$('#lmask_string1').click(function(){
$('#masked_string').text( 'Masked value: "'+$.mask.string( $('#dump_input').val(), '99/99/99' )+'"' );
return false;
});
$('#lmask_string2').click(function(){
$('#masked_string').text( 'Masked value: "'+$.mask.string( $('#dump_input').val(), 'phone' )+'"' );
return false;
});
$('#lmask_string3').click(function(){
$('#masked_string').text( 'Masked value: "'+$.mask.string( $('#dump_input').val(), {mask:'999.999,999',type:'reverse'} )+'"' );
return false;
});
})(jQuery);

read-only inputs

<input type="text" readonly="readonly" alt="decimal" />

callbacks example

<input type="text" id="cb_test_input" />

          $('#cb_test_input').setMask({mask:'99.99-99/99',defaultValue:'000',
onInvalid:function(c,nKey){
$('#cb_alerts').text('You can\'t input "'+c+'" in here. It\'s keynumber is "'+nKey+'".');
$(this).css('background','red');
},
onValid: function(c,nKey){
$('#cb_alerts').text('"'+c+'" is ok. It\'s keynumber is "'+nKey+'".');
$(this).css('background','#40FF3F');
},
onOverflow: function(c,nKey){
$('#cb_alerts').text("You can't enter more characters but your input might be ok!");
$(this).css('background','green');
}
});

signed masks example

<input type="text" alt="signed-decimal" />

<input type="text" value="-4445" alt="signed-decimal" />

<input type="text" class="{mask:'99,999.999',type:'reverse',defaultValue:'-000'}" />

‘repeat’ mask type example

This mask makes it possible to have values with infinite or defined length in a input. It doesn’t support fixedChars.

<input type="text" class="{mask:'9', type:'repeat'}" />

<input type="text" class="{mask:'9', type:'repeat', 'maxLength': 7}" />

Note: both the attribute maxLength and the option maxLength will work for setting the max length for the repeat mask.

$().unmaskedVal example (deprecated)

!!! This function has been deprecated, because it does not work correctly for all the masks but it should be easy for you to implement yours. !!! This function removes all the FixedChars from the value of the input and returns it.

<input type="text" value="3456" alt="decimal" id="unmasked_input" />

<a onclick="jQuery('#unmasked_string').html( jQuery('#unmasked_input').unmaskedVal() );return false;" href="#">Get the unmasked value from the input</a>

Changelog

v1.1.2

• Set defaultValue property of the input. This fixes the behavior of the reset button on forms. Now the value will be reseted to the masked value;
• âêô were added to the ‘@’ rule;
• Fix for the auto-tab feature, it now focus just on visible form elements;
• Added setSize option. It sets the input size based on the length of the mask (work with fixed and reverse masks only).

v1.1.1

• Fixed caret bug on ‘repeat’ masks;
• Fixed keyup event on fixed masks, it is now firing propertly;
• Added selectCharsOnFocus option;
• Added textAlign option.

v1.1

• Mask type ‘infinite’ is now called ‘repeat’ (using ‘infinite’ still works but it is deprecated). It now allows a maxLenght value to be set. MaxLength can be set by the maxLength attribute of the element or the maxLength option;
• You can easily set an autoTab option that will focus the next form element when the masked input is totally filled. It is true by default but you can put a jQuery selector string to match the next element you want to be focused.
• Deprecated ‘unmaskVal’ function. This function is too buggy… works for most cases but not all. The best way to unmask a value is by doing it yourself;
• The fixedChars option is not global anymore, giving more flexibility for the masks;
• ‘phone-us’ mask is now ‘(999) 999-9999′;
• Correctly fires the onChange event on reverse masked inputs.

v1.0.4

• New mask type ‘infinite’, it allows infinite values at masks. See demos for a better understanding;
• Added new function ‘unmaskVal’ that returns the input value without the mask. See demos for a better understanding;
• Removed a serious bug at IE that was fixing the caret at the end of the input;

v1.0.3

• Callback functions now receive the char number as it second parameter, so it is possible to detect exactly which key has been pressed;
• Added the signed masks. It only works with the reverse mask. See demos for more details;
• iPhone support improved. iPhone now works 100% better than the 1.0.2 version. I’ts logic have been changed, and now it’s working with full features.

v1.0.2

• Added input callbacks: onInvalid, onValid and onOverflow;
• Added support for default values;
• Can now be used like $().setMask({});
• Added the function $.mask.string(string,mask) that will mask a string (see demos);
• Now the value of the input is masked at the time the mask is applyed to it.

v1.0.1

• Added support for iphone;
• Removed a bug where a fixed char would be replaced by an inputed one.

v1.0

• Initial release.

License

All this documentations and examples are under the Open Source MIT License.

The MIT License

Copyright (c) 2008 Fábio Miranda Costa

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the “Software”), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED “AS IS”, WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.