meioMask – a jQuery mask plugin

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

meioMask download

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>
YUI Compressor

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 :P .

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' }
}
You may add yours to the $.mask.masks Object. Like this: 
$.mask.masks.msk = {mask: '999'}
This code will add a mask called ‘msk’ to the masks Object. Now you can use an input with the ‘attr’ atribute set to this new mask. Like this:

Input with the ‘msk’ Mask 
<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' }
});
You can put any other options on a new mask that you create (fixedChars for example.)

meioMask demos

standalone

Example form with defined masks 
<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.

Example form for the paste feature copy: 1234567890 and paste at the input copy: (12) 3456-7890 and paste at the input copy: 12abcdef34567890 and paste at the input 
<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.

Example form with masks using metadata plugin metadata overwrote the ‘(99) 666′ mask set at alt attribute 
<input type="text" id="metadata1" class="{mask:'555-666'}"  alt="(99) 666" />
metadata overwrote the ‘phone’ mask set at alt attribute 
<input type="text" id="metadata1" class="{mask:'555-666'}"  alt="phone" />
<input type="text" class="{mask:'666-888'}" />

change mask on-the-fly

Example form with the change-on-the-fly feature 
<input type="text" id="change_mask" alt="(99) 666" maxlength="10" />
You can use it like you do with most of jQuery functions, chaining other functions. At this example the code for the first button is: 
$('#change_mask').setMask('***:***').val('');
This code sets the mask for all the elements that matches the selector ‘#change_mask’ to ‘***:***’ and then set it’s value to ”.

mask string example

Example that shows the $.mask.string() function 
<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

Example that shows a readonly input working as it should (some plugins breaks this!) 
<input type="text" readonly="readonly" alt="decimal" />

callbacks example

Example with a input and defined callbacks 
<input type="text" id="cb_test_input" />
And the javascript: 
          $('#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

Example with signed masks (‘-’ and ‘+’ keys will change they’re signal) 
<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 with a mask of type repeat 
<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.

Click on the link to see the unmaskedVal return 
<input type="text" value="3456" alt="decimal" id="unmasked_input" />
This link has this code: 
<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. :P

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.

246 Responses to “meioMask – a jQuery mask plugin”

  1. 1
    Fernando Says:
    September 24th, 2008 at 15:39

    Gostei desse plugin, soh uma duvida quanto às regras, onde estou tendo dificuldades para criar mascaras com letras, por exemplo uma placa de carro “ABC-0000″

  2. 2
    fabiomcosta Says:
    September 24th, 2008 at 16:16

    ok amigo, obrigado.

    uma mascara desse tipo ficaria:

    $.mask.masks.placa = {mask: ‘ZZZ-9999′} ou $.mask.masks.placa = {mask: ‘aaa-9999′}

    O primeiro caso é um pouco ruim porque vai forçar o usuário a digitar as 3 letras iniciais em maiúsculo, o que pode causar confusão. nesse segundo caso você teria que colocar style=”text-transform:uppercase” no seu input de texto, mas aceita tanto minúsculo quanto maiúsculo, e o seu input estará sempre com letras maiúsculas, por causa do css que foi aplicado.

    Abraço.

  3. 3
    Fernando Says:
    September 24th, 2008 at 17:43

    Segui tua dica e deu certo oq eu queria, obrigado.

  4. 4
    SethG911 Says:
    October 3rd, 2008 at 11:49

    I was wondering if you could add (or give me some idea how to add) character styling if a person tried to type a “masked” character. For example: to make the field’s input or label or whatnot flash red to indicate an invalid character was being pressed.

  5. 5
    SethG911 Says:
    October 3rd, 2008 at 11:51

    Oh and I forgot to mention how awesome this plugin is. Beats the heck out of anything else jquery has for masking inputs. Many many thanks.

  6. 6
    fabiomcosta Says:
    October 4th, 2008 at 00:29

    thanks seth! i’m still working on some other feaures i want to put on the plugin but i’ll look at this nice feature you are sharing and tell you if it works ok. Have a nice day.

  7. 7
    Rogers Says:
    October 7th, 2008 at 16:18

    I had made a call to $.mask.fixedChars=’[(),.:/ -x]‘; Which broke the application (timeout errors). Apparently placing the ‘x’ next to the ‘-’ specified a range. instead invoking: $.mask.fixedChars=’[(),.x:/ -]‘; resolved the problem as allowed the ‘x’ to be a fixed character in a mask.

  8. 8
    fabiomcosta Says:
    October 11th, 2008 at 21:54

    Yes, just a regular expression error.

  9. 9
    Jeremy Dorn Says:
    October 13th, 2008 at 14:12

    This is by far the best input masking plugin I’ve come across. There is just one feature I would really like to see added.

    I needed a mask for currency and wanted the output to look like $9,999.99. It is just like your decimal number example except it has a ‘$’ in front. I couldn’t figure out how to do this with your plug in. Here is the mask I tried:

    { mask : ‘99.999,999,999,999$’, type : ‘reverse’ }

    This only added a “$” when all 14 digits were entered. I ended up altering some functions and adding a new option that allowed this. My new mask looks like:

    { mask : ‘99.999,999,999,999′, type : ‘reverse’, suffix : ‘$’ } I’d be happy to help implement a more robust version of this feature if you want. Thanks again for your great plugin.

  10. 10
    fabiomcosta Says:
    October 13th, 2008 at 14:45

    Hm, i haven’t thought about that, i would like to see it in action, can you show me the site using the modification? If you could send the code by mail i would appreciate too! I’ll release the 1.1 version soon, i’m just doing some improvements on the code and changing the actual docs page to the projects page from the blog. Maybe i can add this feature of yours if it’s possible. Thanks again!

  11. 11
    Jeremy Dorn Says:
    October 14th, 2008 at 02:33

    The site using it isn’t up yet. I made a demo page at http://jeremydorn.com/demos/meio.html

    All I did was tag the suffix onto the end of the output and adjust the cursor position. A more elegant solution would be to allow a callback function after the mask is applied.

  12. 12
    David Esperalta Says:
    October 16th, 2008 at 05:48

    Input con máscaras para jQuery…

    Eso es lo que proporciona el plugin meioMask para jQuery, la posibilidad de mostrar "inputs con máscaras" en nuestros formularios HTML. Se trata de preparar un determinado "input" para que sólo permita una determin…

  13. 13
    Pedro Martins Says:
    October 16th, 2008 at 21:32

    Excelent work! Congratulations!!!

    This is a fantastic JQuery plugin. And… Thank you for sharing this code with us ;-)

  14. 14
    fabiomcosta Says:
    October 17th, 2008 at 00:49

    Thanks Pedro! I’ve uploaded the new version without the bug you pointed out. So if you guys are having problems with the value that the input haves not being masked correctly, get 1.0.2 again, i’ve just made the fix. Thanks to Pedro again!

  15. 15
    fabiomcosta Says:
    October 17th, 2008 at 00:53

    Jeremy, i’ve been thinking about the sufix and prefix stuff…. i don’t think it should be implemented in the mask, it’s unnecessary. You could could put the sufix after the input and the prefix before the input. It’s just my point of view, if more people request it maybe i’ll implement. Hope you understand.

  16. 16
    meioMask 1.0.3 version released! | Meio Código Says:
    November 1st, 2008 at 12:50

    [...] can see the plugin page here. It contains documentation and examples. Please tell me any bug, new feature, english errors on [...]

  17. 17
    Julio Formiga Says:
    November 3rd, 2008 at 06:18

    Primeiro parabéns pelo código, bem limpo. Acabei de ‘migrar’, de um sistema que estou desenvolvendo, do [Masked Input Plugin] para o [meioMask] e uma coisa que senti falta foi a máscara no input, que seria, por exemplo, mostrar em um campo de data [//____] e quando for digitando ir substituindo, o que ele chama de ‘placeholder’. Caso haja interesse em adicionar esse recurso, pode contar comigo, meu conhecimento é javascript é básico, mas no que eu puder ajudar, nem que seja com testes, estamos ai blz? :) Valeu.

  18. 18
    fabiomcosta Says:
    November 3rd, 2008 at 09:56

    Olá julio, muito obrigado pelo comentário e pela idéia. Isso já é possível no meioMask porém de uma forma diferente. Você poderia criar a mascara {mask:’39/19/2999′ , defaultValue:’00000000′} e no input vai aparecer:

    00/00/0000

    Bom Isso não é igual ao antigo placeholder mas funciona de forma similar. Eu particularmente não gosto do placeholder por que ele te ‘força’ a usar a máscara por completo. Tipo… se eu quisesse criar uma máscara para preencher com 3 telefones:

    (99) 9999-9999 / (99) 9999-9999 / (99) 9999-9999

    Meu input me ‘obrigaria’ a escrever os 3 telefones, mas eu quero que ele escreva no máximo 3… Deu pra entender? De qualquer forma fica o recado… Se houver mais gente pedindo o placeholder eu adicionarei em uma versão futura.

  19. 19
    meioMask 1.0.2 version released! | Meio Código Says:
    November 3rd, 2008 at 17:39

    [...] I’m going to centralize all the comments at the page of the project, so i’m not allowing comments here but you are free and motivated to comment at the meioMask’s project page. [...]

  20. 20
    meioMask a jQuery Plugin for masking inputs | Meio Código Says:
    November 3rd, 2008 at 17:41

    [...] I’ve centralized all the comments at the page of the project, so i’m not allowing comments here but you are free and motivated to comment at the meioMask’s project page. [...]

  21. 21
    wade Says:
    November 9th, 2008 at 14:28

    Is it possible to style individual characters within an input value? For example, if you had , could you have “a” be blue, “b” red, and “c” yellow and italic? If you can, I have a big suggestion for an enhancement to what you can do with default values. I am currently using default value for a date field that doubles as an input hint

    date_us_default: {mask: ‘19/39/9999′, defaultValue: ‘mmddyyy’}

    I then have the contents of the text field gray on page load. When the user starts typing in the field, I change the text to black. If the user deletes everything they have typed and tabs away (blur), then I change it back to gray. This works, but it would be even more effective if instead of changing the entire text to black, just the new characters that are entered in over the mask/default were black so that the user could see the difference between the mask and their input as they typed. For example, if they had only entered the month, then they would see “08/dd/yyyy”, with “08″ in black, “/dd/yyyy” in gray italics, and the cursor between the first slash and the first “d”. If it is possible to style individual characters within an input field then it seems like this would be a fairly easy enhancement using a few more custom callback options.

  22. 22
    fabiomcosta Says:
    November 9th, 2008 at 17:45

    This would be really nice, but till today i haven’t heard of a way to do this using CSS and/or Javascript. I don’t think it’s possible as a cross browser solution (this plugin is intended to be cross browser). But i really appreciate your suggestion and concern with this plugin. Have a nice day!

  23. 23
    daniel Says:
    November 12th, 2008 at 16:18

    Great Control. I noticed that if you have a mask where it has a fixed character(s) at the end of the mask they won’t show.

    I.e. I’m wanting to format a height field. So an example would be someone who’s 70 inches tall would be 5′ 10″. The last “, nor does any of other fixed chars.

  24. 24
    fabiomcosta Says:
    November 16th, 2008 at 13:24

    Hi people, Stay tuned because i do some improvements on the mask but don’t release a new version. Of course they are not so significant for most users, but they are minor bug fixes and fixes for unwanted behavior of the mask. So watch the revision number you use and compare it with the one on the site to see if yours is the last version. Thanks!

  25. 25
    adwin Says:
    November 20th, 2008 at 00:55

    This is great ….

    may i know how to: 1. if people enter 30000 (in decimal mask) .. it should masked into 3,000 not 300.00. how to do that ?

    1. how to mask manually ? i have a calculation … for example var x = $(‘#unit1′).val() * $(‘#unit2′).val();
      –> i need to mask x value before i put in the input text. $(‘#myinputbox’).val(x);

    thanks …

  26. 26
    fabiomcosta Says:
    November 21st, 2008 at 18:28

    Hi Adwin!

    1. if people enter 30000 (in decimal mask) .. it should masked into 3,000 not 300.00. how to do that ?

    you should set the mask type to ‘reverse’. Ex: $(‘input’).setMask( { type:’reverse’,defaultValue:’0000′,mask:’999,999.999.999.999′ } ); Or create a mask with these settings.

    1. how to mask manually ? i have a calculation … for example var x = $(‘#unit1′).val() * $(‘#unit2′).val(); –> i need to mask x value before i put in the input text. $(‘#myinputbox’).val(x);

    You can use the mask.string function. Ex: $.mask.string( ‘9999′ , { type:’reverse’,defaultValue:’0000′,mask:’999,999.999.999.999′ } ); And this will return the string ‘9,999′.

  27. 27
    José Says:
    December 1st, 2008 at 16:13

    Olá Fábio. Ótimo trabalho.

    Estou com uma dúvida. Seria possível obter o valor do textbox sem a máscara? Se não, deixo minha sugestão para ser implementada, para poder trabalhar com uma espécie de format or parse de um valor.

    Abraços.

  28. 28
    fabiomcosta Says:
    December 1st, 2008 at 17:00

    José é possível fazer isso atualmente, mas é necessário algum conhecimento do plugin. Achei interessante sua idéia, vou colocar na nova versão. Por enquanto você pode pegar o valor do input e dar um replace usando o $.mask.fixedChars, dessa forma:

    $(’seletor’).val().replace($.mask.fixedCharsRegG,”);

    Não testei mas provavelmente vai dar certo hehe. Me avise se der tudo certo, por favor.

  29. 29
    José Says:
    December 1st, 2008 at 22:26

    Funcionou perfeitamente Fábio. Muito obrigado. Eu ia mexer no teu script para implementar esta funcionalidade, mas como vi que há muitos lugares onde tu usa os fixedCharsReg e fixedCharsRegG, demoraria além do tempo que disponho para entrega do projeto. Mas, basicamente minha idéia seria em substituir onde você definiu os fixedChars para uma função que, ao invés de olhar uma lista de fixedChars, tratar como fixedChar todo coracter que não passar no test() da lista de rules[].

    Outra coisa que andei testando seria uma espécie de “mask chain”. Isso seria útil no caso de teste de campos CPF ou CNPJ. Veja abaixo:

        var cpf = {mask:'999.999.999-999'};
    var cnpj = {mask:'99.999.999/9999-99'};
    var curr = cpf;

    jQuery(function($) {
        jQuery("#test").setMask(curr);
    });

    function check(e) {
        jQuery(function($) {
            var $el = jQuery("#test");
            var newMask = cpf;

            if ($el.val().length &gt; 14) {
                newMask = cnpj;
            }

            if (curr != newMask) {
                curr = newMask;
                jQuery("#test").setMask(curr);
            }
        });
    }

    Nesse caso o que seria passado seria um array de Mask, onde, obrigatória mente o segundo deve ser maior (length) que o primeiro e assim sucessivamente, e ao pattern do mask anterior seria adicionado o primeiro caracter do próximo patter (veja que o mask do cpf termina com -999), permitindo, assim, que seja digitado um caracter a mais e identificado que o length daquele pattern foi extrapolado, assumindo-se o próximo pattern como corrente. Isso poderia limietar a termos obrigatóriamente maks umas maiores que as outras. Outra opção seria, sempre que formos aplicar a máscara, percorrer a lista de mascaras e deixar como corrente a primeira que encontrarmos cujo o valor digitado não viole as regras, e mantermos ela até que um novo valor que viole as regras da máscara corrente se aplique e achemos na list outra que melhor se adeque. O que acha?

  30. 30
    Augusto Says:
    December 2nd, 2008 at 13:31

    Olá! Tentei por horas fazer funcionar a máscara, e quando consegui, só funcionou no firefox. Não sei o que posso estar fazendo de errado mas poderia alguem postar um simples modelo com o código implementado? Please!

  31. 31
    Daniel Says:
    December 5th, 2008 at 09:17

    Perfetio cara…

    salvo minha vida :D

  32. 32
    fabiomcosta Says:
    December 5th, 2008 at 10:14

    for the people who likes the mootools framework (http://mootools.net/), i’ve been working on a mootools version of meioMask and it is working nicely :P

    If you wanna grab it, go here (http://www.meiocodigo.com/projects/moomeiomask). It’s still undocumented but i’m working on it. I’m gonna release 1.0.4 shortly, so… stay tuned!

  33. 33
    Tim Says:
    December 7th, 2008 at 16:54

    Excellent work thanks for this. In IE6 entering a field always positions caret at end of input, if I use cursors keys to move caret, it auto repositions to end of input straight away. This doesnt happen with Firefox 3.

  34. 34
    fabiomcosta Says:
    December 7th, 2008 at 19:21

    Hi Tim, i just solved this bug, at 1.0.4 you won’t have this. It’s not released yet but it will be soon.

    Thanks for the advice!

  35. 35
    meioMask 1.0.4 version released! | Meio Código Says:
    December 7th, 2008 at 23:51

    [...] can see the plugin page here. It contains documentation and examples. Please tell me any bug, new feature, english errors on [...]

  36. 36
    Ferdinando Says:
    December 10th, 2008 at 07:39

    Antes de tudo, parabéns pelo plugin.

    Desenvolvi um tipo de planilha e estou sofrendo muito no sentido de calculos, pois tenho que tratar os pontos e virgulas de acordo com a mask utilizada, ai descobri a .unmaskedVal(), mais ele volta um numero inteiro, e precisava de um numero com casas decimais, sei que é so fazer uma função, mais olhando o codigo fonte do meio mask, que ele trata as fixedchars, não tem como passar como parametro ou alguma coisa do tipo, pra manter as casas decimais, no caso com ponto ou virgula, conforme se desejar.

    Abraços e muito obrigado pela sua iniciativa.

    Ferdinando – REDE DO BEM

  37. 37
    George Adamson Says:
    December 10th, 2008 at 09:46

    Very powerful. Excellent plugin, thank you.

    Am I right in thinking this mask is applied to each character in turn? Hence when using the “date” mask it is possible to type 38/15/2008?! Is there a way to apply a more holistic date mask that will for instance only allow a 0 or 1 after a 3 for the day?

    Many thanks

  38. 38
    fabiomcosta Says:
    December 10th, 2008 at 10:19

    @Ferdinando Realmente… essa função foi uma adição da mais nova versão então eu nem tinha pensado em casos como esses. Foi um dos usuários que propôs ela. Mas como vai demorar um pouco para uma nova versão sair você sabe como resolver esse seu problema ou quer alguma ajuda?

    @George Adamson

    The intention of the mask is to help the user to enter the correct input, with the corret format… you should ALWAYS have a validation method (server-side is more secure) after the user enter his input.

    Thanks for your comments!

  39. 39
    Sam Striano Says:
    December 10th, 2008 at 18:53

    Can you use regular expressions for the mask?

  40. 40
    Kris Felscher Says:
    December 11th, 2008 at 15:27

    This is a fantastic plugin, I was using a different jquery plugin to do the same thing but had serious issues with pasting, this one works excellently.

    The only challenge I have is that certain characters defined in the mask cannot be typed. I have a mask called “ip” defined as “255.255.255.255″, when I type the first octet of an ip address, by reflex, I type the “.” as well. When I do, the cursor position does not move. From a usability perspective, this is frustrating because technically the “.” is an allowed character at the 4th position and I expect the field to accept it.

    It would also be great if there were some sort of placeholder character that could be defined so that the user could see what type of information they are supposed to enter. Using my IP example, having the field preformatted as “...” would be a great help as the user would immediately know that they need to supply all 3 digits in each octet. I know that I could define this in my mask or default value, but doing so would also allow the “_” character to be passed in the form value.

    Great work though, if I get the time I’ll see if I can add these changes in and submit them back into the trunk.

  41. 41
    Rob Juurlink Says:
    December 16th, 2008 at 11:06

    Indeed, using a regular expression for the mask would be a welcome feature. Something like this:

    $(“input[name='field']“).setMask({ mask:’[a-zA-Z0-9. -]*’ });

    Overall an excellent plugin, thanks.

  42. 42
    Bob Knothe Says:
    December 17th, 2008 at 15:17

    Very nice plugin – it will come in handy.

    On the decimal mask is there any way to start the enter in the one position and then move to the right side of the deciaml by entering the decimal point?

  43. 43
    igor Says:
    December 18th, 2008 at 12:17

    plugin has to be aware of decimal sign (whatever it is). for example, if mask is like ‘999,99′ user must be able to enter just “7,3″ for seven-dot-three.

  44. 44
    Tyler Says:
    December 18th, 2008 at 18:01

    I can’t seem to get the attr option to work properly. The default value is always used.

    My call to setMask: $(“input[mask]“).setMask({attr: “mask”});

  45. 45
    Wolfgang Says:
    January 12th, 2009 at 09:36

    I need a mask like +99 9??? 9???????-??? where ? is completely optional. Valid Examples: +49 1 2345 +43 3323 23232-20 +49 3323 2323232

    How would I do that? Is it possible with this plugin?If not, has anyone seen such a “masked input plugin” that can exactly solve such problems? tia

  46. 46
    SethG911 Says:
    January 12th, 2009 at 18:22

    $.mask.rules = { ‘x’: /[-\x00\x2D\u002D\d]/ };

    Trying to allow just digits and “-” but can’t seem to get the “-” to be allowed. It lets me type one then the next character typed makes the “-” disappear. As you can see I have tried just – plus the ascii and unicode versions as well. Any ideas?

  47. 47
    Pascal Says:
    January 19th, 2009 at 15:10

    Hi, congratulations for this good work.

    I was wondering if it’s possible to use a reverse type and keep it centered in the input field (text-align: center) ?

    Thank’s !

  48. 48
    Pascal Says:
    January 19th, 2009 at 16:10

    hi, I tried this mask and I got the following problem : Mask : mask: ‘365′, defaultValue: ‘0′

    Input with value=”240″. I want to use this input field to know the number of working day in a year.

    Reload the page with that, the default value is shorten to “24″ and I cannot put a 0 in the input field.

    Thank’s

  49. 49
    Dan Says:
    January 26th, 2009 at 13:17

    I must be doing something wrong – I cannot even get the most basic example to work. I keep getting $.browser.version is undefined. Any idea’s? I am using firefox 3.0.5. In IE I get Line 204 object doesn’t support this property or method

  50. 50
    Dan Says:
    January 26th, 2009 at 13:54

    jQuery version 1.12

  51. 51
    john kendall Says:
    January 31st, 2009 at 14:03

    Nice work. You should consider exposing an “applyMask(value)” function. Also, there is a bug when type=’infinite’; if you go to insert characters the second character typed gets appended to the end instead of inserted at caret position.

    Regards, jck

  52. 52
    Dan Says:
    February 4th, 2009 at 18:01

    What do I need to do in order to have a time mask that is like 4:01 AM or 4:01 PM?

  53. 53
    fabiomcosta Says:
    February 4th, 2009 at 19:30

    Im still answering my mails, dont’be afraid to send a comment hehe.

  54. 54
    Leo Says:
    February 10th, 2009 at 15:00

    Primeiramente, meus parabéns!

    Estou iniciando agora tanto no js quanto no jquery, mas não consegui fazer funcionar as máscaras. Seria muito (pedido de um iniciante) postar um exemplo (tipo uma página html separada) só com as chamadas e os códigos da máscara? Pois no corpo do site, fica muita informação… Não sei se estou pedindo demais…

    Desde já, agradeço pela atenção.

  55. 55
    Toucouleur Says:
    February 11th, 2009 at 09:38

    Is there a way to implement something like this.form.elements['name_field'].select(); to let users just remove the default value with a key press in the input field ?

  56. 56
    Mateus Says:
    February 12th, 2009 at 09:01

    Algúem poderia me mostrar um exemplo de como funciona a função onValid ?? Um código aonde ela esteja funcionando, pois já tentei de tudo e ainda não consegui nada. Parabéns pelo plugin, muito bom. []’s

  57. 57
    fabiomcosta Says:
    February 12th, 2009 at 14:44

    @Mateus, Aqui nesta página existe um exemplo.

    http://www.meiocodigo.com/projects/meiomask/#mm_callback

    Abraço

  58. 58
    Eduardo Lira Says:
    February 18th, 2009 at 11:02

    Muito bom mesmo o plugin, estou usando já a tempo. Parabens!!!

    Mas senguinte, continua sim o bug de posicionar o cursor no final do input no IE. Estou usando o de “integer” e de “decimal” e se eu digitar dois numeros rapidos o segundo vai para a frente do digitado. É como se ele posicionasse o cursor no segundo digito e não no canto. Não testei se esse bug foi resolvido realmente no IE6 mas no IE7 não está funcionando. Ressaltando que no Mozilla Firefox funciona PERFEITAMENTE. Alguma previsão de correção do bug? Abraço

  59. 59
    Fabio Says:
    February 19th, 2009 at 10:33

    Olá Fábio, parabéns pela iniciativa. Testei algumas funcionalidades porém sem sucesso. Preciso definir um campo que aceite somente texto sem números. Definindo uma nova máscara obtive sucesso, porém tive que definir a máscara dentro de sua lib (naquela lista de libs pré-definidas), pois qdo defini da seguinte forma, “$.fn.setMask.masks.textOnly= {mask: ‘a’};”, no meu código não funcionou e outra coisa que gostaria de entender, o setRange funciona como um limitador de caracteres como o maxLength? Minha idéia era poder definir esse tipo de máscara com uma propriedade para limitar a qtdade de caracteres.

    Se puder me dar um help agradeço.

    []´s

  60. 60
    Pradeep Says:
    February 26th, 2009 at 07:22

    Hi,

    I have used this mask. ‘date_us_default’: {mask: ‘19/39/9999′, defaultValue: ‘mmddyyy’}

    mm (month) part is accepting values more than 12 while dd part is accepting values values more than 31.

    I am new to jquery. Does that plugin doesnt validate on fly ?

  61. 61
    Luis Says:
    February 26th, 2009 at 15:31

    Olá Fábio…seu plugin parece mesmo ser demais. Só que eu não consigo nem começar a fazer funcionar. Tenho uma página com o Jquery 1.2.6 (minified), incluo o meioMask 1.0.4 (compressed) e recebo seguinte erro de javascript: “options is not defined”. Vou sugerir a mesma coisa que outros usuários: uma página só de exemplos. Valeu!

  62. 62
    Luis Says:
    February 26th, 2009 at 15:41

    Putz…demorei! É só tirar o “options” de dentro de “$(‘input:text’).setMask(options);”. Não tinha conseguido entender direito! Foi mal!

  63. 63
    rodolfo Says:
    March 6th, 2009 at 09:49

    E ae galera.

    Estou utilizando o YUI para fazer requisicoes ajax. Porem quando tento atribuir mascaras com o meiomask [ $('input:text').setMask() ] nao tenho sucesso. Alias, $(‘input:text’) me retorna NULL. Alguem sabe se há conflito entre seletores de YUI e Jquery??

  64. 64
    Marco Says:
    March 12th, 2009 at 12:54

    I found a bug,when trying to put 10,50 i get 10.000,50. It starts typing at the first char then the cursor move to the end why?

    Marco

  65. 65
    ndlinh Says:
    March 17th, 2009 at 05:06

    I want to capture onChange event, but meiomask does not throw onchange event. I modified _onMask in order to trigger onChange event.

    onMask : function(e){ var thisObj = e.data.thisObj, o = {}; o._this = e.target; o.$this = $(o._this); // if the input is readonly it does nothing if( o.$this.attr(‘readonly’) ) return true; o.value = o.$this.val(); o.nKey = thisObj._getKeyNumber(e); o.range = thisObj.__getRange(o._this); o.valueArray = o.value.split(”); o.data = o.$this.data(‘mask’); o[o.data.type] = true;

    //modified by ndlinh: 2009-03-17 {{
var oldValue = o.value;                
var ret = e.data.func.call(thisObj,e,o);
if (oldValue != o.$this.val()) {
    $(e.target).trigger('change');
}
// }}
return ret;

    }

  66. 66
    Luis Alvarenga Says:
    March 21st, 2009 at 01:07

    Parabéns pela ótima biblioteca !

  67. 67
    Franco Fernandes Says:
    March 23rd, 2009 at 14:32

    Thanks great plugin.

    I need a mask that supports a ‘/’ in the field, this of course is a fixedChar, so I wrote

    $.mask.fixedChars = ‘[(),.: -]‘; $.mask.masks.itemcodemask = {mask: ‘*’, type : ‘infinite’};

    I still can’t type a / in this field.

    Just to give an idea of the data in this field which is a key field for my form, here are some examples DSCH5/B, KDL32V1400/S

    This is a fairly common need, can this plugin support it ?

    Regards Franco

  68. 68
    Franco Fernandes Says:
    March 23rd, 2009 at 14:58

    Sorry!, I missed the part where you say infinite mask does not support fixedChars

    How can I support a mask for input ‘0-9,a-z,A-Z,/’ ?

  69. 69
    Franco Fernandes Says:
    March 23rd, 2009 at 17:31

    Thank you Fabio

    Here is the solution for anyone who needs it

    $.mask.fixedChars = ‘[(),.: -]‘; $.mask.rules.k = /[0-9a-zA-Z\/]/; $.mask.masks.itemcodemask = {mask: ‘k’, type : ‘infinite’};

  70. 70
    Brook Says:
    March 24th, 2009 at 18:43

    I would like to be able to do a currency mask ($899.00). I like the prefix and suffix solution from http://jeremydorn.com/demos/meio.html, but it is implemented for an older version. How can it be implemented with your new version?

  71. 71
    taz35 Says:
    March 27th, 2009 at 10:28

    Hi,

    Thanks a lot for this great job ! I would like to create a mask with unlimited Uppercase text and allow apostrophe or specific caracter.It is for a name field. For example : L’ANNEE Is it possible ? Thanks in advance

  72. 72
    taz35 Says:
    March 27th, 2009 at 14:12

    I find a solution for uppercase infinte :

    But i can’t find solution for autorise apostrophe. Tnahks in advance

  73. 73
    ndlinh Says:
    March 29th, 2009 at 21:57

    Great plugin. Thank you very much.

    I met a problem in IE6 with version 1.0.4 In IE6 entering a field always positions caret at end of input when I set type : ‘reverse’

  74. 74
    Vetal Says:
    April 1st, 2009 at 07:44

    I get same trouble as Marco with decimal mask(in IE6, Opera 9.64 too).

  75. 75
    fabiomcosta Says:
    April 1st, 2009 at 08:20

    Soon i’ll be realeasing the 1.1 version, guys. Thanks for waiting.

  76. 76
    Vitor Almeida Says:
    April 8th, 2009 at 14:21

    Olá ! Parabéns pelo plugin ! Venho utilizando com frequencia.. mas encontrei um pequeno problema, talvez não seja culpa do script, mas se for possível uma solução seria interessante !

    Situação: Abrir um formulário com os dados já preenchidos

    • Ok, os campos aparecem mascarados corretamente.

    Problema: Botão reset do formulário.

    • Os campos mascarados perdem a formatação

    Existe uma forma de resolver ?

  77. 77
    Rogério Martins Says:
    April 12th, 2009 at 14:17

    bom dia, primeiramente gostaria de parabenizá-lo pelo excelente plugin. Segundo gostaria de expor meu problema com a utilização do mesmo, estou usando o plugin juntamente com o richFaces do jsf, meu menu chama as páginas internas via ajax, ao carregar a página interna algumas máskaras não funcionam e outras sim, primeiramente percebi que o erro não ocorre apenas no ie, já no firefox, chrome e safari sim, após alguns dias de testes, hoje finalmente percebi que se colocar type:’reverse’ funciona nestes navegadores, poderia me indicar alguma forma de resolver para todas as máscaras que não seja necessário utilizar o type:’reverse’??

  78. 78
    meioMask 1.1 version released! | Meio Código Says:
    April 12th, 2009 at 18:12

    [...] can see the plugin page here. It contains documentation and examples. Please tell me any bug, new feature, english errors on [...]

  79. 79
    Mahbub Says:
    April 17th, 2009 at 17:37

    This is definitely a major improvement over the jQuery Mask Input Plugin. I like this one more and will use this from now on when i get some chance to integrate it. Nice work man!

  80. 80
    Flávio Henrique Says:
    April 17th, 2009 at 18:07

    Hi Fábio! After updating to 1.1 problems started to show up in Firefox and Chrome. IE6 = no problem. Masks, defined on javascript events like $(‘#formulario\:minhaTabela\:0\:serie’).setMask(‘** ** ** **’); dont’t work anymore. I changed back to 1.0.3 and everything is fine again. Any help ?

    Thank you.

  81. 81
    ugur volkan Says:
    April 21st, 2009 at 07:23

    thanks but I have a problem

    input mask and unlimited character?

  82. 82
    ugur volkan Says:
    April 21st, 2009 at 08:04

    ohh.

    type: ‘fixed’ set to type: ‘infinite’

  83. 83
    Adnan Sohail Says:
    April 21st, 2009 at 21:06

    This might be a stupid question.. but is there an example on how i can use this with asp.net.

    I basically want to apply custom masking to asp textbox.

  84. 84
    Adnan Sohail Says:
    April 22nd, 2009 at 12:31

    Can i just one page code of how to get it working?

  85. 85
    Douglas Says:
    April 24th, 2009 at 20:55

    I am trying to allow only words, ex “Cat dog lunch-break”, so I wrote this:

    $.mask.rules.k = /[a-zA-Z\s-]/; $.mask.masks.alpha = { mask: ‘k’, type: ‘infinite’ };

    But my spaces gets deleted, why?

  86. 86
    Matías Says:
    April 25th, 2009 at 10:16

    Amazing job!!!! It’s exactly what I was looking for.

    Congratulations!!

  87. 87
    Troks Says:
    April 26th, 2009 at 19:23

    very good man!

    I have the same problem as Douglas, the spaces are deleted. how can I fix that?

    thanks!

  88. 88
    fabiomcosta Says:
    April 26th, 2009 at 19:39

    As i told douglas, you should change your fixedChars to not include the space character.

    $.mask.rules.k = /[a-zA-Z\s-]/; $.mask.masks.alpha = { mask: ‘k’, type: ‘infinite’, fixedChars : ‘[(),.:/]‘ };

    Here i created a mask called alpha using the rule ‘k’ i’ve just created. Pay attention to the ‘fixedChars’ that doesn’t include the space character. It will work correctly. Have fun!

  89. 89
    LD Says:
    April 27th, 2009 at 11:33

    This mask is not allowing me to enter “1000″:

    $.mask.masks.piIntegerAmount = { mask: ‘999,99′, type: ‘reverse’, defaultValue: ‘0′ };

    However it works with “1111″, but not “1000″.

    Any idea why?

  90. 90
    LD Says:
    April 27th, 2009 at 11:34

    Sorry, about the previous comment…

    The mask that doesn’t work is:

    $.mask.masks.piIntegerAmount = { mask: ‘999,99′, defaultValue: ‘0′ };

    So when it doesn’t have the reverse, it doesn’t allow “1000″. Only when I have “reverse” that I can type “1000″.

    Any idea?

  91. 91
    Maxi Says:
    April 27th, 2009 at 13:02

    Can I ask you something? with time mask: 29:69, I can type 26:61 which is terrible wrong. so I changed it to 23:59 (which is the maximum hour possible) but then I can’t type 15:47 which is ok. I appears that the 5 is higher than the 3 etc, etc… How can I set up a mask that works? I tried the rules but according with the code, the number masks will be overwritten. this same question applies to date masks. I want to set a rule with regular expressions that works fine.

  92. 92
    Alexander Says:
    April 29th, 2009 at 23:32

    hey, very good plugin! is it possible that the onchange event isn’t working? I want to see in a span what I type, but the jquery change event is not firing. but the span show me the value in the blur event (which I didn’t coded) is this a normal behavior in the plugin? if not, can be fixed? or do you know a workaround to my need?

  93. 93
    Alexander Says:
    April 29th, 2009 at 23:45

    me again. sorry! I’m new with jquery…and now I know that your plugin is working fine!! from jquery: “…The change event fires when a control loses the input focus and its value has been modified since gaining focus…” I will investigate more!! thanks!! and again sorry!!

  94. 94
    Luke Says:
    May 1st, 2009 at 14:49

    ’signed-decimal-us’ : { mask : ‘99,999.999.999.999′, type : ‘reverse’, defaultValue : ‘+000′ }

    should be

    ’signed-decimal-us’ : { mask : ‘99.999,999,999,999′, type : ‘reverse’, defaultValue : ‘+000′ }

    :)

    Also when I try to do:

    $.mask.masks.signedCurrency = { mask : ‘99.999,999,999,999$’, type : ‘reverse’, defaultValue : ‘+000′ };

    The dollar sign does not make it into the mask :( Any ideas?

  95. 95
    Luis Henrique Weirich de Matos Says:
    May 6th, 2009 at 15:26

    O funcionamento do plugin é ótimo. Parabéns! Considerações: O comportamento ao pressionar delete ou backspace com o cursor no meio do texto poderia ter um comportamento melhor. Hoje ele apaga um caracter e o cursor é jogado para o fim do input. O comportamento poderia ser semelhante ao do maskedinput. Até

  96. 96
    Carlos Alexandre Dias Says:
    May 10th, 2009 at 23:03

    Parabéns pelo plugin Fábio, estou usando em conjunto com o framework codeigniter, e tá dez, o seu plugin para a formatação( nos campos necessários claro), e a classe de validação de campos do codeigniter. Combinação perfeita!

    Codeigniter+meioMask = POWER! :D Exemplo: … $this->form_validation->set_rules(‘cpf’, ‘Cpf’, ‘required|min_length[14]‘); … <input type=”text” id=”cpf” name=”cpf” alt=”cpf” value=”"/> …

  97. 97
    Daniel Says:
    May 15th, 2009 at 20:30

    Tem alguma forma de deixar o attr selecionar o name como algo equivalente a : $(‘input[name*=phone]‘) ?

  98. 98
    25+ jQuery Plugins that enhance and beautify HTML form elements « Online Free Application Software Tips Tools Wallpapers Says:
    May 18th, 2009 at 12:19

    [...] Meio Mask [...]

  99. 99
    Alberto Says:
    May 21st, 2009 at 22:34

    How can make something like:

    $(‘input:text’).setMask({mask:’a', fixedChars:’[ ]‘, type:’repeat’});

    for filter all the input box to input just words? … it’s a shame can’t make it.

  100. 100
    colonel Says:
    May 22nd, 2009 at 06:42

    How I can disable this plugin? For example I want enable it on focus of element or mousemove event and on mouseout or unfocuse disable it. Is it possible?

    Thanks.

  101. 101
    Edison Says:
    June 2nd, 2009 at 21:14

    Fábio,

    Gostaria de deixar algumas sugestões, algumas das quais já citadas:

    1) implementar a opção de RegExp como complemento ao mask, como por exemplo regexp:’[a-z]+’; dessa forma, para casos mais elaborados o plugin poderia avaliar ambos e retornar o evento callback; poderemos implementar regras como “três palavras” ou ainda “palavra com 20 posições” sem precisar usar o length e o repeat;

    2) permitir a adoção ou não do placeholder, que em alguns casos é altamente aplicável;

    3) deixar como default comportamentos para onInvalid e onOverflow; sugiro usar a dinâmica que o plugin jVal tem, apresentando uma div com uma mensagem padrão tipo “Caractere X inválido” para onInvalid ou “Campo atingiu seu tamanho máximo” para onOverflow;

    Excelente trabalho! Plugin altamente recomendável.

  102. 102
    Ricks Says:
    June 2nd, 2009 at 23:09

    Wicked plugin mate.

    For currency I added ‘$’ to the signals…

    signals : { ‘+’ : ”, ‘-’ : ‘-’, ‘$’ : ‘$’ },

    And for the mask, I’ve used…

    $.mask.masks = { ‘money’ : { mask : ‘999,999′, type : ‘reverse’, defaultValue : ‘$’ } } It works fine for me, just thought I’d put it out there.

  103. 103
    sozmen Says:
    June 6th, 2009 at 11:06

    A good plugin works fine. I have used this plugin for client side validations in a java enterprise project. I have coded a new js named csv4seam.js (http://suayip.com/csv4seam.js) for seam framework client side jsf validations. But i have a big problem with reverse option on decimal inputs. my mask is ‘decimal’: { mask : ‘99,999.999.999.999′, type : ‘reverse’, defaultValue : ‘000′ }

    There is an annoying bug our customers and users think, when you enter a number cursor goes to end of the input. if i clicked between 2 and 3 in that input (“23,40″) and enter 4, new number becomes 243,40. all ok but after entered 4 just i typed a new number ex. 6, input becomes 243,406. thats wrong i want it to be 2463,40. I think you understood my problem. I tried to change code to fix that but i couldnt. Please help me. Because we use this plugin in a huge site with many users and has contains many decimal fields for money input….

  104. 104
    Mascarando campo input com o plugin meioMask. « Danilo - Desenvolvimento web Says:
    June 9th, 2009 at 09:20

    [...] o plugin está na versão 1.1-1 e sua documentação pode ser encontrada aqui [...]

  105. 105
    Chris Says:
    June 12th, 2009 at 10:47

    When adding input elements to an array of elements to the DOM via Javascript, how would I go about applying a given mask to the newly created elements?

    For example – I start with two input fields, FRM_NAME, FRM_PHONE with two masks.

    I can click a hyperlink to add more FRM_NAME, FRM_PHONE elements to the DOM. Of course, when I do so, the new elements do not have the mask information.

    Any suggestions? Thanks.

  106. 106
    sozmen Says:
    June 12th, 2009 at 11:06

    you should set all masks after adding new elements i think. I have solved this in http://suayip.com/csv4seam.js function : setMasks(); when an ajax operation is completed,run this function.

  107. 107
    25+ jQuery Plugins that enhance and beautify HTML form elements « Dogfeeds——IT Telescope Says:
    June 13th, 2009 at 10:56

    [...] Meio Mask [...]

  108. 108
    How To Create a Super Easy to Use Forms Says:
    June 17th, 2009 at 17:47

    [...] number 9 in all of our masks. This simply means, any number from 0 to 9. meioMask has a bunch of default rules in place for both alpha and numeric characters. You might have also noticed we didn’t write a [...]

  109. 109
    Endel Says:
    June 18th, 2009 at 11:44

    Very useful ;) Thanks!

  110. 110
    Leandro Says:
    June 18th, 2009 at 20:28

    Estou utilizando o meioMask e acho ele ótimo. Só estou incomodado com uma incompatibilidade no Firefox, estou tentando arrumar mas ainda não consegui, se alguém tiver uma luz … por favor !!!

    No link abaixo existe uma discução sobre isso: http://groups.google.com/group/javasf/browse_thread/thread/99ff83d7c3f0f8f9

    Testei várias vezes e com certeza não é problema com java/richfaces/a4j … o problema só ocorre no firefox …

    Se alguém tiver uma solução .. por favor .. postem aí …

  111. 111
    Fred Says:
    June 24th, 2009 at 16:40

    Também estou com um problema que pode ser igual ao seu.

    depois de executar uma ação ajax o meioMask adiciona o maxlength=0 e não consigo mais adicionar informações no campo. O problema ocorre com todas as máscadas (date, decimal, etc) .

    Estou sentando a mascara de saguinte forma:

    $j(“input[class*= integer]:visible:enabled”).setMask({mask : ‘9999′});

    você já verificou se o campo não está com o atributo maxlength=0 ?

    Abraço

  112. 112
    Fred Says:
    June 24th, 2009 at 18:40

    $().removeAttr(‘maxlength’) set maxlength to 0 in IE7

    http://dev.jquery.com/ticket/4389

  113. 113
    Claudio Says:
    June 24th, 2009 at 18:53

    Olá, primeiramente parabéns mesmo Fabio pelo plugin, ficou ótimo, estou aqui tentando aprende-lo. Estou tentando criar um campo de tipo texto, ficou: ‘t’: /[0-9a-zA-ZçÇáàãéèíìóòõúùüê/s]/ //adicionei um ê e um espaço

    o problema é que o fixedChars está cancelando o espaço, após digitado.. não sei por enquanto um modo de resolver isso, e antes de tentar mexer no código, vim ver com você.

    Abração e que dê tudo certo aí, Parabens.

  114. 114
    stuart Says:
    June 29th, 2009 at 01:41

    There’s an issue with the bugfix submitted by Pedro where o.rangeStart is referenced (instead of o.range.start). This causes the cursor position to jump around a bit in IE when in reverse mode, so if you type quickly enough the input will be switched around (try it on the reverse decimal sample above).

    Line 491 (version 1.1.2) should change from:

    if ($.browser.msie && ((o.rangeStart == 0 && o.range.end == 0) || o.rangeStart != o.range.end))

    to:

    if ($.browser.msie && ((o.range.start == 0 && o.range.end == 0) || o.range.start != o.range.end))

    Thanks for the great plugin, Fabio!

  115. 115
    mamy Says:
    June 29th, 2009 at 23:31

    Thanks,

    Would like to drop a thank you note, thanks for such a great plug in

  116. 116
    diogo Says:
    June 30th, 2009 at 13:25

    Verifiquei que o evento “change” só é chamado quando o tipo da máscara é “reverse”.

    Verifiquei que na linha 324(no método _onBlur) é feita a comparação “dataObj.type==’reverse’”. Removendo essa comparação o evento funciona conforme esperado

    Exemplo:

    $(function() {
    $('#teste').setMask({ mask: '99/99/9999',type: 'fixed',autoTab: false});
});

  117. 117
    diogo Says:
    June 30th, 2009 at 13:26

  118. 118
    Otto Says:
    June 30th, 2009 at 14:34

    Hi. Your time example allows invalid dates, like 25:59. Is there a way to fix that? Does the plugin support, for example, a regular expression as a mask?

    I’ve only read the explanation and checked the examples, I haven’t had enough time to test it yet.

    Thanks.

  119. 119
    Wilson Says:
    June 30th, 2009 at 20:56

    I’m getting problem with this mask with onchange, it just not working on IE7,8, works fine on FF, I’m using it with struts2 tags.

    I’m getting freak bcz a such good plug-in not works as should on IE, pls I need a fix for that.

    Thx and best regards

    Wilson

  120. 120
    fabiomcosta Says:
    July 1st, 2009 at 00:48

    This bug is fixed, thanks Diogo.

  121. 121
    fabiomcosta Says:
    July 1st, 2009 at 01:04

    Ok i wont launch a new version but 1.1.3 now has this fix. If your input is not triggering the onchange event on IE download it again and it will be fixed. Sorry for this inconsistency but i found better not to release a new version in such a short amount of time (like i did with 1.1.3) and i think that this bugfix is kind of important. Hope you guys understand.

  122. 122
    Wilson Says:
    July 1st, 2009 at 09:08

    Oh Dear,

    I didn’t mean that, I love that plug-in, I apologize if I got miss understood, You guys are such good professional’s and Jquery is a such good JS API and meiomask is a such good plug-in, and IE is the one who make me freak, tha’s what meant.

    Sorry!

    Next time I’ll type it more kind as you ask.

  123. 123
    Wilson Says:
    July 1st, 2009 at 09:22

    BTW!

    I found this,

    Here it is where I got the onchange issue: this way not works

    But, if I change it to this: it do works.

    Regards,

  124. 124
    Chris Says:
    July 7th, 2009 at 12:00

    Would it be possible to apply a generic mask (say, it only had autoTab: true) on document load, and then override the generic mask by using the alt tag for inputs that have particular mask requirements? Would it be possible to do this WITHOUT typing alt=”generic” for each input box, and just automatically assign this value using meio.mask or jQuery?

    Thanks.

  125. 125
    Web Form Validation: Best Practices and Tutorials | How-To | Smashing Magazine Says:
    July 7th, 2009 at 14:40

    [...] meioMask [...]

  126. 126
    U.S. Art Studios Inc. » Blog Archive - Web Form Validation: Best Practices and Tutorials - U.S. Art Studios Inc. . A full firm advertising agency firm specialized in motion picture, photography, graphic design, printing and web design. Says:
    July 7th, 2009 at 16:30

    [...] meioMask [...]

  127. 127
    Leo Santos Says:
    July 7th, 2009 at 20:51

    Hi,

    By using a mask of 999.9999 the user is required to input 001.99 for the amount 1.99 which is not good. What mask can I used to enable them to enter the decimal point at any stage they want (eg 1.99, 32.99, 107.55) but at the same time controlling their input to only numeric?

    Thanks, Leo

  128. 128
    Web Form Validation: Best Practices and Tutorials | Desinine Says:
    July 8th, 2009 at 02:39

    [...] meioMask [...]

  129. 129
    Web Form Validation: Best Practices and Tutorials « Ramesh Says:
    July 8th, 2009 at 10:29

    [...] meioMask [...]

  130. 130
    Danil Flores Says:
    July 8th, 2009 at 16:47

    Hi, I ran into a bug with IE 7 (haven’t tested it in IE 8) and meioMask regarding the caret position moving to the end for any input that is typed in. I opened up an issue with the details of this on your github repository. Thanks in advance if you have time to fix this issue.

    Other than that minor bug, my company is really happy with your masking plugin =)

    Thanks, Danil M. Flores Ultimate Software

  131. 131
    Valentin Says:
    July 9th, 2009 at 10:02

    Good day all, how I can create mask for: 1) domain name without ‘www’ 2) russian charset with spaces for Firstname, LastName, Middlename. For example like this: ‘Полтавцев Сергей Юрьевич’. 3) russian charset with ‘(),.:/ -’, ‘0-9′

    Thanks a lot.

  132. 132
    Máscara em campo com JQuery+ MeioMask + Rich Faces + Ajax4Java « Eryckson et al. Says:
    July 9th, 2009 at 16:32

    [...] http://www.meiocodigo.com/projects/meiomask/ [...]

  133. 133
    Itamar Says:
    July 10th, 2009 at 10:14

    Bom dia, Gostaria de saber como posso colocar a mascara numa tabela? ${MinhaProriedade_cnpj} Ex: Como deveria ficar visualmente na pagina… 12.123.123/1234-12 Nao consegui usar a mascara em tabelas entao.. ele mostra sem formatacao. Ex: 12123123123412

    Abraços

    Itamar Nunes

  134. 134
    Web Form Validation: Best Practices and Tutorials | Results videos photos news blogs At I google wiki . com Says:
    July 11th, 2009 at 18:05

    [...] meioMask [...]

  135. 135
    roor Says:
    July 13th, 2009 at 10:32

    Hi, i have faloving problem. I have currency mask {mask: ‘999,999,999,999′,type: ‘reverse’}, And i need enter 100.55 or just simple 100 without cents. How do this? I hope my questions clear.

  136. 136
    Web Form Validation: Best Practices and Tutorials — missrix Says:
    July 14th, 2009 at 13:06

    [...] meioMask [...]

  137. 137
    Keynes Says:
    July 14th, 2009 at 15:51

    Ola amigo, Primeiro parabenizar com seu pluguin de muitos que testei o seu melhor atendeu minhas necessidades. Estava usando até então a versão 1.0.4.

    Seria interessante implementar assim como foi feito para o Decimal aceitar o mais e menos (signed-decimal) fazer o mesmo para o integer. ;)

    Mais uma vez parabens

  138. 138
    Keynes Says:
    July 14th, 2009 at 16:01

    Outra coisa.. mexendo acabei encontrando um bug ;)

    nao sei se ja reportaram ou se tem como voce resolver isso. Quando se usa o campo data do jQuery e seu plugin com a opção de autoTab ativo ao terminar de digitar a data o calendario do jQuery fica ativo e focado no campo de baixo.

    Qualquer novidade lhe aviso

    Abraços

  139. 139
    Fabio Stocco Says:
    July 23rd, 2009 at 12:23

    Olá, seu plugin é o melhor mas pelo amor de Deus, corrija o texto. HAVES não existe! O correto é has.

  140. 140
    Marcos Bispo de Oliveira Says:
    July 25th, 2009 at 19:43

    Excelente!

  141. 141
    Creare form facilissimi da utilizzare! | sastgroup.com Says:
    July 27th, 2009 at 08:01

    [...] [...]

  142. 142
    Creare form facilissimi da utilizzare! Says:
    July 27th, 2009 at 21:10

    [...] – Scaricare e includere il plugin meioMask [...]

  143. 143
    suayip ozmen Says:
    July 29th, 2009 at 10:18

    Hi. i have great news. i have fixed ie bug; caret position goes to end of the string on decimal and reverse masks. it was tested in ie7 and 8 great worked for me. you can download bug fixed version from http://suayip.com/meiomask.js

  144. 144
    thiago Says:
    July 29th, 2009 at 11:27

    Oi Fabio, primeiro parabéns pelo plugin! É muito útil ele. Estou com uma dúvida na seguinte linha de código:

    // removes the maxLength attribute (it will be set again if you use the unset method) $this.removeAttr(mlStr);

    Qual o objetivo dela? Não entendo muito de JS/jQuery, mas creio que seja ela que esteja causando o problema com campos que são renderizados por ajax no JSF e que já foi comentado por outros usuários aqui.

    Eu comentei essa linha e depois disso os meus campos renderizados via ajax voltaram a funcionara. Talvez possa me dar uma explicação do pq. Até o momento não encontrei nenhum problema por ter comentado essa linha.

  145. 145
    10 jQuery form usability tips | Pieter Beulque Says:
    July 29th, 2009 at 18:24

    [...] When masking input areas, you automatically change the way it’s shown. Like when the user types in 1212 as a time, it shows up as 12:12. This makes it easier for the user to read his form again before submitting and it’s supposed to reduce errors made. A very extended plugin is meioMask. [...]

  146. 146
    Gustavo Henrique Says:
    July 30th, 2009 at 13:48

    Realmente é muito bom esse plugin! Parabéns! Apenas modifique o máscara para phone como 99-9999-9999 para manter compatibilidade com o BRPhoneNumberField do django. Parabéns mesmo!

  147. 147
    Newcos Says:
    August 2nd, 2009 at 22:54

    Olá amigo. Atualmente eu uso o seguinte plugin de máscara do jQuery: http://digitalbush.com/projects/masked-input-plugin/#demo

    O seu tem mais detalhes e opções, apesar de ser mais pesado: ~11kb contra ~2,8kb do masked input plugin.

    Entretanto, não encontrei um detalhe básico no seu, que é ao clicar no campo, já mostrar ao usuário como será o formato e tamanho do preenchimento, como o campo telefone: ()____-__

    Conforme o exemplo do plugin que eu indiquei.

    Fica a dica/sugestão. Obrigado e parabéns pelo Script!

  148. 148
    Meio Código » meioMask – a jQuery mask plugin | Squico Says:
    August 3rd, 2009 at 07:20

    [...] In: JQuery plugins 3 Aug 2009 Go to Source [...]

  149. 149
    Eder Says:
    August 8th, 2009 at 08:05

    Gostaria de criar uma mascara com a seguinte caracteristica [1-9+-]999 ou seja, o primeiro caracter pode ser sinal +, sinal – ou numero não nulo, e as posições seguintes, numeros de 0 a 9

    mas nao consegui criar essa mascara, pois o sinal negativo é utilizado como se fosse especial pelo plugin.

    alguem saberia como me ajudar na construcao dessa mascara?

  150. 150
    Marvin Brayton Says:
    August 14th, 2009 at 10:05

    Can you make this work for textareas?

  151. 151
    Milos Rasic Says:
    August 14th, 2009 at 12:00

    Is there a way to meioMask to display placeholders like Digitalbush Masked Input? For example, I would like a masked date input to look like ..____ before the user starts entering data, and then the _ are replaced with the characters the user enters.

  152. 152
    nubcake Says:
    August 20th, 2009 at 06:51

    Thanks for a great plugin!

    Is it possible to implement ‘minLength’ as a option?

  153. 153
    Marcelo de Assis Says:
    August 21st, 2009 at 09:24

    Parabéns Fábio, a classe é maravilhosa.

    Só falta uma implementação: Validar o dia perfeitamente, pois dando a margem de ‘39/12/2099′ permito au usário inserir dias maiores que 31.

    Valeu!

  154. 154
    Shawnee Says:
    August 25th, 2009 at 14:35

    Can I ask you something? with time mask: 29:59, I can type 26:59 which is terrible wrong. so I changed it to 23:59 (which is the maximum hour possible) but then I can’t type 15:47 which is ok. It appears that the 5 is higher than the 3 etc, etc… How can I set up a mask that works? I tried the rules but according with the code, the number masks will be overwritten. this same question applies to date masks. I want to set a rule with regular expressions that works fine. Can you tell how to solve it? or can you explain how rules work (with numbers)?

  155. 155
    20 jQuery Plugins and Tutorials to Enhance Forms : Speckyboy Design Magazine Says:
    August 26th, 2009 at 06:27

    [...] meioMask – a jQuery Mask Form Input Plugin [...]

  156. 156
    Gustav Says:
    August 29th, 2009 at 13:21

    It seems like using defaultValue breaks when typing two characters quick after eachother.

  157. 157
    fabio Says:
    September 1st, 2009 at 00:08

    Ola Fabio.Tudo blz. sou iniciante no jquery e estou construindo um form dinamico. Como usaria seu plugin nesta situação. Muito obrigado e t+

  158. 158
    20 jQuery Plugins and Tutorials to Enhance Forms | pc-aras Says:
    September 3rd, 2009 at 17:10

    [...] meioMask – a jQuery Mask Form Input Plugin [...]

  159. 159
    Kushal Says:
    September 7th, 2009 at 04:24

    i want to use time validation.but in the demo it also accepts time 25:45 .it should not accept hours greater than 23.how can i do that? Thanx

  160. 160
    Rafael Almeida Says:
    September 8th, 2009 at 11:48

    Gostaria de saber se tem como criar uma mask usando regex. Por exemplo uma mask para IP onde o padrão poderia ser 255.255.255.255 mas podendo cada uma destas casas term menos de tres caracteres?

  161. 161
    50+ jQuery Plugins for Form Enhancements | tripwire magazine Says:
    September 10th, 2009 at 16:15

    [...] Meio Mask [...]

  162. 162
    taz2315 Says:
    September 17th, 2009 at 04:09

    <

    script type=”text/javascript”> $().ready(function() {

    $('input:text').setMask();

    $(".ea").keyup(function(){
    cp =  $("#ea"+this.seq).val().replace(/,/g,'')  *  $("#unitprice"+this.seq).val().replace(/,/g,'') ;
    $("#costplan"+this.seq).val($.mask.string( cp, '999,999,999,999,999' ));    
});

$(".unitprice").keyup(function(){
    cp =  $("#ea"+this.seq).val().replace(/,/g,'')  *  $("#unitprice"+this.seq).val().replace(/,/g,'') ;
    $("#costplan"+this.seq).val($.mask.string( cp, '999,999,999,999,999'  ));   
});

$(".listprice").keyup(function(){

    cp = 100 * ( 1 -  ( $("#unitprice"+this.seq).val().replace(/,/g,'') / $("#listprice"+this.seq).val().replace(/,/g,'')));
    cp =  cp.toFixed(2);     
    $("#dc"+this.seq).val(cp);    
});

    });

        <td align = "center" >
        <input type="text" name="ea"     id = "ea1"  seq ="1"  class="ea" value=""  alt="integer" size=3  ></td>
    <td align = "center" >
    
        <input type="text" name="unitprice"  id = "unitprice1" seq ="1"   class="unitprice"   alt="integer" value=""  size=12  ></td>
      <td align = "center" >
     <input type="text" name="costplan"  id = "costplan1" seq ="1"  class="costplan"  alt="integer" value=""  size=12  ></td>

    ea = 10 unitprice = 100000 result = 100,000,0

    I want to result “1,000,000″

    $(“#costplan”+this.seq).val($.mask.string( cp, ‘999,999,999,999,999′ )); ??? How can I fix?

  163. 163
    20 jQuery Plugins and Tutorials to Enhance Forms | WEBDESIGN FAN Says:
    September 18th, 2009 at 14:34

    [...] meioMask – a jQuery Mask Form Input Plugin [...]

  164. 164
    Markus Osanger Says:
    September 21st, 2009 at 08:18

    Hey! Great work, i gotta say. I found one kinda annyoing bug, thought. It occurs on my date fields with a mask like 39.19.2999 if i type in the first two digits VERY quickly. It then instantly jumps to the end of the field, forcing the user to go all the way back to the month-part. It does happen in all browsers.

    I couldn’t find the root of the problem. I did find a fix for it though. It’s just a quick positioning of the caret in the end of _onKeyPress, just before the return statement.

    this.__setRange(o._this, o.range.start, o.range.end);

    cheers Markus

  165. 165
    Fabian Says:
    September 24th, 2009 at 17:57

    OkFabiano

  166. 166
    sozmen Says:
    September 27th, 2009 at 09:19

    i have fixed this bug for ie and firefox. look comments 103 and 143 which i have written…

  167. 167
    rodolfo Says:
    September 29th, 2009 at 13:27

    Eu nao consegui setar a propriedade maxLength quando uso o tipo Decimal, no caso eu queria uma porcentagem de 0.00 a 100.00.

    I could not set the maxLength property when I use the Decimal type, in case I wanted a percentage of 0.00 to 100.00.

  168. 168
    Tufo Says:
    September 29th, 2009 at 14:03

    parabéns mano, único que conseguu suprir a minha necessidade de decimais! só acontece um problema no ASP.NET que quando o textbox está dentro de um update panel, ao ocorrer um postback o textbox perde a máscara e não há reza que faça a máscara voltar!

    vlw!!!

  169. 169
    DAM Says:
    September 30th, 2009 at 11:33

    Olha eu não estou entendendo. A algum tempo estou testando e nada.

    Eu faço exatamente os passos de instalação. E não consigo fazer funcionar.

    Copiei e colei o “snap” em um html. Certinho, criei um input text simples e coloquei id e alt decimal, já não deveria funcionar? Ou tem algum passo q estou passando em branco?

  170. 170
    Meio Mask | AJAX Collection & Research Says:
    October 3rd, 2009 at 03:11

    [...] check it out [...]

  171. 171
    Tamas Says:
    October 13th, 2009 at 07:03

    Hi! Is there a possibility to enter text in ‘insert mode’ instead of ‘overwrite mode’ in the masked input-fields? It seems to me that there is no way to make; every masked input field works only in ‘overwrite mode’…

  172. 172
    jQuery MeioMask - Máscara para input | Gladson Roberto Says:
    October 15th, 2009 at 15:08

    [...] plugin MeioMask permite que sejam adicionadas máscaras ao conteúdo de tags input que o usuário [...]

  173. 173
    Alex C Says:
    October 19th, 2009 at 10:06

    Hi. Great jQuery plugin. I’m trying to use it to mask a field that will display a money amount:

    jQuery(function($){ $(“#txtEstimatedRetailValue”).mask(“$999999″,{placeholder:” “}); });

    However, unless the user enters the maximum number of digits, the field won’t hold its value. Is there a way to indicate minimum/maximum digits? Or is there another way to get this working? Thanks.

  174. 174
    Felipe Almeida Says:
    October 21st, 2009 at 11:14

    Fábio, não está funcionando com o novo JQuery 1.3.2 corretamente. Estou usando Richfaces 3.3.2.SR1.

    No IE/Chrome funciona em partes e no firefox não deixa digitar no input. Isto ocorre quando utilizo em algum modal (richfaces:modal) com ajax (a4j).

    No firefox: Ao digitar no campo com máscara a máscara não é digitada. Ao copiar/colar, não cola. Ao arrastar não arrasta/cola.

    No IE/Chrome: Copiar/colar, cola valores que não deveria colar (se o campo é numérico, está deixando colar strings também). Arrastar/colar, arrasta valores que não deveria colar (se o campo é numérico, está deixando colar strings também).

    Alguém tem alguma idéia?

    Obrigado.

    It´s not function with new JQuery 1.3.2. I´m using Richfaces 3.2.1.SR1 IE/Chrome malfunction/problem and firefox can´t type in the input. It happens when i use a modal (richfaces:modal) with ajax (a4j).

    Firefox: When typing in the input, it doesn´t show the value in the input. Copy/paste, don´t function. Drag and drop don´t function.

    IE/Chrome: Copy/paste, paste a value that shouldn´t paste (if my input is numeric, it leaves strings too). Drag and drop, drag values that sholdn´t paste if my input is numeric, it leaves strings too).

    Does any body have any idea? Thanks.

  175. 175
    Felipe Almeida Says:
    October 21st, 2009 at 15:21

    https://jira.jboss.org/jira/browse/RF-6417?page=com.atlassian.jira.plugin.system.issuetabpanels:all-tabpanel

    Bug?!

    Tentei com usar no reRender do a4j:commandbutton colocando o id do meu input, mas sem sucesso. Coloquei um id no rich:JQuery pra usar no reRender do a4j:commandbutton, mas sem sucesso.

    I´ve tried a4j:commandbutton reRender=”idinput” and/or “idjquery” which is in my input, but no sucess.

    The problem is in Firefox. My firefox is 3.5.xxx

    :(

  176. 176
    35 More Useful jQuery Plugins and Techniques « Tech7.Net Says:
    October 29th, 2009 at 14:34

    [...] meioMask – a jQuery mask form input pluginThis jQuery mask form input plugin has many new features, compatibility, usage, options, fixed characters, and rules. Masks can be setup and tweaked to fit your needs, such as fixed or reversed mask types, has function to mask strings, while still allowing hotkey usage. It works with the iPhone, supports metadata plugin, and much more. Metadata will always overwrite the ‘attr’ value. [...]

  177. 177
    Upgrade to admin side? - Page 2 - osCommerce and osCMax shopping cart software forums Says:
    November 5th, 2009 at 14:27

    [...] [...]

  178. 178
    Felipe Almeida Says:
    November 6th, 2009 at 16:06

    Ok, eu tentei de várias formas. Lógicamente sei que não é problema do MeioMask. O que me parece que é um problema em conjunto com o JQuery novo + Firefox.

    A solução que tive aqui foi: extrair o jquery do richfaces-impl-3.2.1.GA.jar antigo e adicionar na versão nova richfaces-impl-3.3.2.SR1.jar. Funcionou, mas tenho o cuidado de não ocasionar problemas em outros lugares e até o momento não tive.

    It´s not a problem with MeioMask, i think the problem is a group by with new JQuery + Firefox. The solution is extract the JQuery from old richfaces-impl-3.2.1.GA.jar and add in a new version like richfaces-impl-3.3.2.SR1.jar. It worked but i´m carefully with some problems that can cause in the middle of the implementation / test, that i didn´t have so, until now.

  179. 179
    Easy Masked Input Forms Tutorial | Articles and Tutorials Says:
    November 10th, 2009 at 20:02

    [...] credit card information, phone numbers, dates, etc. To satisfy this request I used jQuery and meioMask – a jQuery [...]

  180. 180
    Devin Walker Says:
    November 10th, 2009 at 20:25

    I really think the meioMask plugin is great for creating masked input fields. I wrote an article today show a demo of a working form:

    http://www.dlocc.com/articles/easy-masked-input-forms/

    Hope you guys like it, thanks for the awesome plugin!

    DLOCC

  181. 181
    guido Says:
    November 13th, 2009 at 15:53

    Como formatear un campo tipo “date” pero con separador “-” en vez de “/” ?

    Saludos!

  182. 182
    jean pierre Says:
    November 20th, 2009 at 11:52

    Hy guys ,

    is it possible with meio to create a regexp to match email . i didn’t suceed to do that

    Thanks for your help

  183. 183
    35 More Useful jQuery Plugins and Techniques | Theme Center Says:
    November 21st, 2009 at 09:19

    [...] meioMask – a jQuery mask form input plugin This jQuery mask form input plugin has many new features, compatibility, usage, options, fixed characters, and rules. Masks can be setup and tweaked to fit your needs, such as fixed or reversed mask types, has function to mask strings, while still allowing hotkey usage. It works with the iPhone, supports metadata plugin, and much more. Metadata will always overwrite the ‘attr’ value. [...]

  184. 184
    CP Says:
    November 25th, 2009 at 15:53 

    
<script src="scripts/jquery.meio.mask.js" type="text/javascript"></script>

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

    I have this code and it fails in IE8 (with or without compatibility mode). It breaks once you reach the last character (in this case last integer for CC) It breaks on this line

    line #603 var formEls = input.form.elements. input.form is null.

    Is this a known issue or I am missing something. Thank you for a great plugin.

  185. 185
    CP Says:
    November 25th, 2009 at 16:41

    After further testing, IE breaks on autoTab. If I set it to false, it is working as expected.

    Can you please confirm autoTab issue with IE 8 (with or without compatibility mdoe?)

    Thanks a lot.

  186. 186
    Júlio Cavalcanti Says:
    December 2nd, 2009 at 10:56

    Olá! Eu tentei utilizar o plugin mas está dando o seguinte erro no javascript:

    Erro: document.selection is undefined Arquivo-fonte: ../js/jquery.meio.mask.js Linha: 656

    Pode me ajudar a resolver?

    Valeu! Abraço!

  187. 187
    Chino Says:
    December 2nd, 2009 at 18:28

    como formateo una mascara para obtener un input text con lo siguiente: (593) 99 9999999, donde el (593) debe aparecer fijo en el input text.

  188. 188
    Plugin JQuery untuk Form di Web- Titan Integra Says:
    December 3rd, 2009 at 22:52

    [...] meioMask – a jQuery mask form input plugin [...]

  189. 189
    Utilizando Formtastic e Inputs » jésus lopes Says:
    December 4th, 2009 at 20:35

    [...] utiliza o plugin meioMask para criar as máscaras, demais opções e configurações podem ser vista na própria página do [...]

  190. 190
    Rogério Says:
    December 7th, 2009 at 07:35

    Hi, i tried to use meiomask whit jquery.hotkeys-0.7.9.min.js and it wont work more, do you know how to fix it ?

    Thank you

  191. 191
    30 jQuery Form Element Enhancing Tools Collection | Designer Sandbox Says:
    December 9th, 2009 at 10:07

    [...] want to have the ‘/’ to be a fixedChar. So the fixedChars value can be ‘[/]‘…. Project Site | [...]

  192. 192
    Plugins jQuery para manejo de formularios HTML | Diseño web, accesibilidad, usabilidad, posicionamiento y optimización web - AlmacenPlantillasWeb Blog Says:
    December 26th, 2009 at 08:54

    [...] Meio Mask Meio Mask [...]

  193. 193
    20 Plugins para jQuery | Renan Lima Says:
    January 7th, 2010 at 13:23

    [...] MeioMask – Até agora, pra mim este é o melhor plugin para mascarar [...]

  194. 194
    Justas Says:
    January 7th, 2010 at 20:17

    In the “Defined Masks” section you have the phone-us mask having 4 9’s in the first part of the phone mask.

    ‘phone-us’ : { mask : ‘(999) 9999-9999′ },

    it should be

    ‘phone-us’ : { mask : ‘(999) 999-9999′ },

    The code appears to have the mask corrected.

    Thanks for your effort.

  195. 195
    16个Javascript表单事件脚本(表单验证、选择) « 幻岛|领地 Says:
    January 9th, 2010 at 21:36

    [...] 5. meioMask (演示地址) [...]

  196. 196
    asdadas Says:
    January 10th, 2010 at 14:34

    13132311312312323

  197. 197
    Igor Says:
    January 10th, 2010 at 15:11

    Olá Fábio,

    Parabéns pelo excelente plugin. Estou fazendo alguns testes com ele, juntamente com JBoss Seam, e me deparei com o mesmo problema do Thiago do post n. 144. Quando o ajax faz um reRender do campo onde eu previamente defini uma máscara, o campo html fica com maxLength = 0, e nenhuma informação pode ser inserida no campo. Assim como o Tiago relatou, eu comentei a linha “$this.removeAttr(mlStr);” do método “set” e o problema não ocorre mais. Você tem alguma ideia do porque? Esta linha é realmente necessária?

  198. 198
    MhagnumDw Says:
    January 12th, 2010 at 13:20

    Ao Igor (post 197), ao thiago (post 144) e ao fabiomcosta: Igor, também tive esse problema e olhando o código do meiomask.js, na função “set: function(el,options)” existe a linha “mlStr = ‘maxLength’;”. Coloque toda a palavra maxLength em minúsculo, maxlength.

    Isso deve funcionar.

  199. 199
    Igor Says:
    January 13th, 2010 at 22:38

    MhagnumDw, fiz o teste seguindo sua sugestão e, pelo que me parece, tudo funcionou perfeitamente. Porém fiquei intrigado pois na função “unset” também é utilizado a string maxLength: “$this.attr(‘maxLength’, maxLength)”. Não deveriamos alterar ai também? Ou quem sabe trocar todos os maxLength para minúsculo?

  200. 200
    MhagnumDw Says:
    January 14th, 2010 at 09:00

    Igor, nessa linha que você citou também, pois ele faz referência ao nome do atributo (maxlength). Nunca usei o unsetMask. O bom seria o fabiomcosta dá uma olhada nisso.

  201. 201
    75+ Top jQuery Plugins to improve Your HTML Forms | Afif Fattouh - Web Specialist Says:
    January 20th, 2010 at 06:12

    [...] Meio Mask [...]

  202. 202
    75+ Top jQuery Plugins to improve Your HTML Forms | tripwire magazine Says:
    January 20th, 2010 at 19:08

    [...] Meio Mask [...]

  203. 203
    Jo Says:
    January 28th, 2010 at 04:21

    Meio Mask – The Best!

  204. 204
    Jo Says:
    January 28th, 2010 at 04:23

    Meio Mask – The Best! Very User-Friendly for customization.

  205. 205
    Developer Steve Says:
    January 28th, 2010 at 19:31

    Hi, thanks for the nice plug in. Have you ever considered having a seperate ‘paste’ mask? Or maybe you have a work around for accomplishing this? Thanks!

  206. 206
    futi Says:
    February 2nd, 2010 at 09:34

    Hi fabio,

    I want to ask some change if its possible. My mask is { mask: ‘999999′, autoTab : false} In your script, when delete a digit in number then rewrite a number, instead of old digit, it deletes right of it.For example :

    my number : 123456 deleting 3 : 12456 when i rewrite a digit instead of 3, for example 9 : 12956

    i want to write in there : 129456

    Is is possible ?

    Thanks

  207. 207
    MhagnumDw Says:
    February 2nd, 2010 at 09:50

    Com relação a mudança que descrevi no post #198, observei que ela faz com que a máscara não funcione no IE7, o campo nem editável fica. Pra corrigir isso, fiz a seguinte modificação no código:

    var mlStrMod = ‘maxlength’; if($.browser.msie){ mlStrMod = ‘maxLength’; } var maskObj = this, $el = $(el), mlStr = mlStrMod;

    Se o browser for o IE, a string que o mlStr recebe fica sendo ‘maxLength’. Testei no IE7, IE8, FF3.5, Chrome.

  208. 208
    Nelson Teixeira Says:
    February 19th, 2010 at 14:13

    Alguém já testou o componente com um defaultValue diferente de 0 ? estou querendo colocar um campo com decimal e default value igual a 1,0 mas não estou conseguindo. Ex:

    { mask : ‘9,9′, type : ‘reverse’, defaultValue : ‘10′ }

    ele seta o campo em 0. Estou fazendo algo errado ?

  209. 209
    Super Validação de Formulário usando jQuery JavaScript | Sávio Batista Says:
    February 23rd, 2010 at 16:59

    [...] alguns pensem em como por exemplo validar um CEP ou Telefone, sugiro de vejam o MeioMask(http://www.meiocodigo.com/projects/meiomask/) para usar este tipo de recurso, visto que ele formata [...]

  210. 210
    mickey Says:
    February 26th, 2010 at 04:19

    is there any idea when the suffix/prefix solution will be put into the latest version? its been more than a year now…

    it works on the old version – http://jeremydorn.com/demos/meio.html

  211. 211
    Web Form Validation: Best Practices and Tutorials | WebsGeek Says:
    February 26th, 2010 at 12:27

    [...] meioMask [...]

  212. 212
    Ben Erridge Says:
    March 1st, 2010 at 14:25

    I would like an uppercase mask that if a lowercase character was typed it would just insert the uppercase version of the one typed. Is this possible?

  213. 213
    Daniel Says:
    March 3rd, 2010 at 11:53

    You did an execellent work here! Thanks for posting this. I was wondering what would be a good matching mask for e-mail addresses. Would you suggest one?

    Thanks!

  214. 214
    PHP-help » jQuery Form Element Enhancing Tools Collection Says:
    March 8th, 2010 at 09:38

    [...] Project Site | Demo [...]

  215. 215
    Super Validação de Formulário usando jQuery JavaScript « Sávio Batista Consultoria Says:
    March 13th, 2010 at 13:02

    [...] alguns pensem em como por exemplo validar um CEP ou Telefone, sugiro de vejam o MeioMask(http://www.meiocodigo.com/projects/meiomask/) para usar este tipo de recurso, visto que ele formata os campos e tudo mais. Eu mesmo usei no [...]

  216. 216
    20 Plugins para jQuery | TI New'S Says:
    March 18th, 2010 at 08:26

    [...] MeioMask – Até agora, pra mim este é o melhor plugin para mascarar [...]

  217. 217
    Ricardo Says:
    March 24th, 2010 at 11:35

    Fábio,

    Há uma forma de reposicionar a máscara após uma carga dinâmica do valor de um campo?

    Exemplo: via JSON carrego um campo com máscara 999.999.999-99, e previamente configurei uma máscara para ele, mas na carga o campo é preenchido sem a máscara. Há uma forma de contornar isso?

    Is there a way to set mask after dinamic value load to the field?

    I.E.: If using JSON I load a value to a field which already have a placed mask (999.999.999-99), but when the value loads the mask is not placed. Is there a way to solve this?

  218. 218
    15 jQuery Plugins to Enhance Your Web Forms Says:
    March 29th, 2010 at 06:06

    [...] meioMask – a jQuery Mask Form Input Plugin [...]

  219. 219
    Teknik Validasi Form Website | ezinteractives Says:
    March 31st, 2010 at 04:00

    [...] meioMask [...]

  220. 220
    15 jQuery Plugins to Enhance Your Web Forms | blog.lanche86.com Says:
    April 1st, 2010 at 11:39

    [...] meioMask – a jQuery Mask Form Input Plugin [...]

  221. 221
    JQuery: Die 10 besten Formular-Validierungsplugins | BLOGRAMMIERER Says:
    April 8th, 2010 at 12:56

    [...] Homepage: http://www.meiocodigo.com/projects/meiomask/ Demo: http://www.meiocodigo.com/projects/meiomask/#mm_demos [...]

  222. 222
    Leonardo Lima Says:
    April 16th, 2010 at 11:49

    Hi,

    Is possible build a place holder like anothers plugins have ? I think that is just this that is missing in your plugin…

  223. 223
    BEST AJAX EXAMPLES - Nagpur Says:
    May 11th, 2010 at 04:15

    [...] Meio Mask [...]

  224. 224
    Enmascarando campos « ıllıllı 3KBZotas ıllıllı Says:
    May 18th, 2010 at 10:27

    [...] Meio Código: meioMask [...]

  225. 225
    James Coughlin Says:
    May 20th, 2010 at 18:26

    I looked at your demo examples. Feedback regarding decimal input: When the user enters “.4″ then hits enter, he means 4 tenths not 4 one-hundredths. 4 tenths should be allowed to be entered as either “.4″ or “.40″.

    I believe your best paradigm for data input should be like that of spreadsheet for numeric input.

  226. 226
    bakman Says:
    May 26th, 2010 at 14:30

    How can I mask a number lik between 0 & 999 / 0 & 999

    thus something {mask:’999/999′}

    the plugin now requires to enter 009/030 instead of 9/30

  227. 227
    123doing Says:
    June 3rd, 2010 at 23:58

    It’s very good. I like this. Thanks for share. And I wrote something to introduce this project for my readers. You can find the post about this in my website. If something is wrong,pls figure it out.thanks.

  228. 228
    meioMask开源项目 - Ajax代码大全 - Java开源项目 - 表单Form - ajax表单form控件 - Java免费软件 - meioMask - 开源网 Says:
    June 4th, 2010 at 00:00

    [...] meioMask项目主页 | meioMask项目下载 | meioMask中文支持 [...]

  229. 229
    meioMask – uma máscara do jQuery : : Derick A. Vareschi Says:
    June 4th, 2010 at 14:00

    [...] Fonte:meiocodigo likebot_bgcolor = ''; likebot_url = 'http://vareschi.com.br/?p=85'; likebot_type = 'horizontal_thumbs'; [...]

  230. 230
    フォームの見栄え・使い勝手を強化するjQueryプラグインいっぱい | DesignWalker | PORTFOLIO -POST批評空間- Says:
    June 9th, 2010 at 02:52

    [...] meioMask – a jQuery mask plugin [...]

  231. 231
    Validação de CPF e CNPJ no mesmo campo » Sávio Batista Consultoria Says:
    June 10th, 2010 at 14:19

    [...] deixar este recurso perfeito, você deve utilizar o plugin MeioMask do [...]

  232. 232
    55 jQuery Form Plugins To Download And Use | Design your way Says:
    June 29th, 2010 at 21:29

    [...] meioMask – a jQuery mask plugin [...]

  233. 233
    robson Says:
    July 1st, 2010 at 15:13

    nao to conseguindo usar o tab :( , ja tentei colocar o autoTab: false, mas nao funfo meu tab. alguem pode me ajudar?

  234. 234
    55 jQuery Form Plugins To Download And Use « qeqnes | Designing. jQuery, Ajax, PHP, MySQL and Templates Says:
    July 2nd, 2010 at 06:23

    [...] meioMask – a jQuery mask plugin [...]

  235. 235
    Viviane Says:
    July 5th, 2010 at 14:46

    Acho que seria legal se esse plugin oferece a opção de de mostrar () ____-__, por exemplo, para a máscara de telefone, quando a input ganhar foco.

  236. 236
    Paulo Tolentino Says:
    July 12th, 2010 at 18:31

    em: meioMask usage (como usar)

    esta faltando a referencia de: jquery.metadata.js

    caso não coloque as máscaras como esta abaixo não funcionam corretamente.

    class=”{mask:’9′, type:’repeat’, ‘maxLength’: 7}

    Parabéns, fantástica sua biblioteca.

  237. 237
    wedis Says:
    July 18th, 2010 at 18:56

    can your plugin be used in combination with jquery validation plugin? thanks in advance for your reply

  238. 238
    andibaso Says:
    July 22nd, 2010 at 05:54

    I’m using asp.net, how to before postback?

  239. 239
    55 jQuery Form Plugins To Download And Use : Free Pictures Says:
    July 29th, 2010 at 12:42

    [...] meioMask – a jQuery mask plugin [...]

  240. 240
    Utilizando Formtastic e Inputs | Blog Vale Says:
    August 3rd, 2010 at 10:22

    [...] utiliza o plugin meioMask para criar as máscaras, demais opções e configurações podem ser vista na própria página do [...]

  241. 241
    Daniel Lima Says:
    August 7th, 2010 at 11:55

    Olá Fábio. Muito bom o plugin. Mas só uma dúvida: Ele funciona para inputs criados dinamicamente? Há alguma forma de usá-lo com o .live()?

    Abraços!

  242. 242
    djsn Says:
    August 17th, 2010 at 06:27

    I wasted 4 hours to setup all input masks and found that this isn’t working for textareas. thanks

  243. 243
    barisdokudur.com: Just another WordPress site Says:
    September 3rd, 2010 at 08:05

    [...] Meio Mask [...]

  244. 244
    cihip Says:
    September 5th, 2010 at 01:40

    meioMask fixed characters post for thanx.

  245. 245
    Pedro Paulo Says:
    September 6th, 2010 at 10:39

    Caro Daniel, eu consigo usar com live() da seguinte forma, como no exemplo: $(function(){$(“input:text”).live(“keyup”, function(){ $(“#cep”).setMask(“cep”);});});

  246. 246
    Daniel Lima Says:
    September 6th, 2010 at 10:48

    @Pedro, Já tinha conseguido usar aqui de outra forma.

    Obrigado.

Leave a Reply