Oct 17 2008

meioMask – a jQuery mask plugin

fabiomcosta @ 13:16

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.

354 Responses to “meioMask – a jQuery mask plugin”

« Older Comments
Newer Comments »
  1. Milos Rasic says:
    August 14th, 2009 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.

  2. nubcake says:
    August 20th, 2009 06:51

    Thanks for a great plugin!

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

  3. Marcelo de Assis says:
    August 21st, 2009 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!

  4. Shawnee says:
    August 25th, 2009 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)?

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

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

  6. Gustav says:
    August 29th, 2009 13:21

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

  7. fabio says:
    September 1st, 2009 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+

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

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

  9. Kushal says:
    September 7th, 2009 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

  10. Rafael Almeida says:
    September 8th, 2009 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?

  12. taz2315 says:
    September 17th, 2009 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?

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

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

  14. Markus Osanger says:
    September 21st, 2009 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

  15. Fabian says:
    September 24th, 2009 17:57

    OkFabiano

  16. sozmen says:
    September 27th, 2009 09:19

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

  17. rodolfo says:
    September 29th, 2009 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.

  18. Tufo says:
    September 29th, 2009 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!!!

  19. DAM says:
    September 30th, 2009 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?

  21. Tamas says:
    October 13th, 2009 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’…

  22. jQuery MeioMask - Máscara para input | Gladson Roberto says:
    October 15th, 2009 15:08

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

  23. Alex C says:
    October 19th, 2009 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.

  24. Felipe Almeida says:
    October 21st, 2009 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.

  25. Felipe Almeida says:
    October 21st, 2009 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

    :(

  26. 35 More Useful jQuery Plugins and Techniques « Tech7.Net says:
    October 29th, 2009 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. [...]

  28. Felipe Almeida says:
    November 6th, 2009 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.

  29. Easy Masked Input Forms Tutorial | Articles and Tutorials says:
    November 10th, 2009 20:02

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

  30. Devin Walker says:
    November 10th, 2009 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

  31. guido says:
    November 13th, 2009 15:53

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

    Saludos!

  32. jean pierre says:
    November 20th, 2009 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

  33. 35 More Useful jQuery Plugins and Techniques | Theme Center says:
    November 21st, 2009 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. [...]

  34. CP says:
    November 25th, 2009 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.

  35. CP says:
    November 25th, 2009 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.

  36. Júlio Cavalcanti says:
    December 2nd, 2009 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!

  37. Chino says:
    December 2nd, 2009 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.

  38. Plugin JQuery untuk Form di Web- Titan Integra says:
    December 3rd, 2009 22:52

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

  39. Utilizando Formtastic e Inputs » jésus lopes says:
    December 4th, 2009 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 [...]

  40. Rogério says:
    December 7th, 2009 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

  41. 30 jQuery Form Element Enhancing Tools Collection | Designer Sandbox says:
    December 9th, 2009 10:07

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

  43. 20 Plugins para jQuery | Renan Lima says:
    January 7th, 2010 13:23

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

  44. Justas says:
    January 7th, 2010 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.

  46. asdadas says:
    January 10th, 2010 14:34

    13132311312312323

  47. Igor says:
    January 10th, 2010 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?

  48. MhagnumDw says:
    January 12th, 2010 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.

  49. Igor says:
    January 13th, 2010 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?

  50. MhagnumDw says:
    January 14th, 2010 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.

« Older Comments
Newer Comments »

Leave a Reply