Jan 23 2009

Meio.Mask – A Mootools Mask Plugin

fabiomcosta @ 15:32

This is the Meio.Mask plugin for Mootools. Wait for the docs or just download it and see the code to see how to use it.

47 Responses to “Meio.Mask – A Mootools Mask Plugin”

  1. Edgar Magalhães says:
    April 11th, 2009 13:09

    Fabio,

    Gostei da forma como sua biblioteca de mascara trabalha. So que ja utilizo o MooTools e o mesmo da conflito com o JQuery. Dai gostaria que me explicasse como utilizar o meioMask no mootools.

    Grato,

    Edgar.

  2. Olivier Refalo says:
    June 3rd, 2009 09:24

    This is exactly what i was looking for, THANK YOU ! great mootools extension

  3. Luis says:
    June 27th, 2009 10:28

    It does not work, I get an error:

    Browser is not defined – line 50

    Regards

    Luis

  4. ghn says:
    June 29th, 2009 12:16

    Hi, looks like an awesome plugin! however a small documentation (for mootools) would be very appreciated.. such as how to initiate a simple mask and so on.

    Thanks! G.

  5. fabiomcosta says:
    June 29th, 2009 20:56

    Sorry people this project is a little abandoned, im making a hole new version, totally better, thats why there will be no docs till there.

  6. Olivier Refalo says:
    September 2nd, 2009 12:07

    Hi Fabio, I was just wondering how the new project was going ?

    Why don’t you share with us why you don’t like about the current implementation ? I can’t find anything wrong.

    cheers

  8. Diego says:
    December 15th, 2009 14:29

    I have a strange issue.

    On my inpu-masked-text I added a listener function to do something on ‘change’ event, but when I change the value in the input the event “change” seems to do not fire.

    Can somebody help me? Has somebody encountered the same error?

    Thanks a lot.

    Diego

  9. Diego says:
    December 17th, 2009 07:42

    Hey???? is anybody here?

  10. Olivier Refalo says:
    March 24th, 2010 12:49

    Neat, thanks for working on this. Will spent some time reviewing the code once I am done with my current code. Cheers,

  11. Memory Brindes says:
    April 3rd, 2010 03:56

    I will check it library to work in joomla, thanks!

  12. Leonardo Lima says:
    July 23rd, 2010 23:41

    Olá,

    Cara parabens pelo código… mas eu to precisando de um doc para a versão mootools… Não estou conseguindo achar como trocar a mask onfly na versão mootools….

  13. Tulio says:
    August 13th, 2010 12:53

    O script para Mootools está funcionando perfeitamente, porém se adicionar um input sem máscara nenhuma todos os outros posteriores passam a não ter máscara também, alguem saber como faço para resolver isso?

  14. Tulio says:
    August 13th, 2010 12:56

    The Mootools script stop to work when we insert a input without mask before others inputs. May someone help me?

  15. Tulio says:
    August 19th, 2010 09:59

    Alguém poderia me passar um exemplo de como usar o meioMask em um formulário que contém campos sem máscara?

  16. Sascha says:
    September 8th, 2010 06:20

    Great Plugin. The demo works very well, but in my project i’ve got this error: args.klass is not a constructor

    In this Line: return this.store(meiomask, new args.klass(args.options).link(this));

    Could you help me, please?

    Thank you a lot.

    Sascha

  17. Victor Guedes says:
    September 16th, 2010 17:14

    Tive o mesmo problema que alguns relatos acima. Para resolver o problema de alguns campos com máscara e outros não, no momento de fazer a relação do input com o javascript bastar fazer da seguinte forma:

    $(‘idCampo’).meiomask($(‘idCampo’).get(‘data-meiomask’), JSON.decode($(‘idCampo’).get(‘data-meiomask-options’)));

    O único problema é que deve-se fazer um deste para cada input que deseje colocar máscara. Como no meu caso serão somente alguns campos não tive problemas.

    Já para quem deseje fazer para muitos campos, basta fazer desta forma:

    $$(‘.classCamposMask’).each(function(input){ input.meiomask(input.get(‘data-meiomask’), JSON.decode(input.get(‘data-meiomask-options’))); });

    Espero ter ajudado.

  18. Fiote says:
    November 27th, 2010 06:33

    “E.klass is not a constructor”:

    This happens when you got inputs without masks. The code will try to apply the mask in all them and it will raise the error.

    Isso acontece quando você tem campos sem nenhuma máscara. O código vai tentar aplicar as máscaras em todos os campos e então o erro vai acontecer.

    SOLUTION / SOLUÇÃO:

    $$(‘input’).each(function(input) { var data = input.get(‘data-meiomask’); if (data) input.meiomask(input.get(‘data-meiomask’), JSON.decode(input.get(‘data-meiomask-options’))); });

    This will apply the mask only for those inputs with the ‘data-meiokmask’ attribute.

    Isso vai aplicar a máscara apenas nos campos que possuirem o atributo ‘data-meiomask’.

    ^^

  19. Fiote says:
    November 27th, 2010 07:15

    Aff… outro problema / another problem:

    See, everything works great for “insert” forms. But something is not good for “update” forms. Every first focus (or something like that) on the fields set its value to “” (empty). So, when you got a form with filled values already, you got a problem. The masks works as they should, but there a “set(‘value’,”)” somewhere in your code that is screwing things.

  20. fabiomcosta says:
    November 27th, 2010 14:18

    Hi @Fiote, just fixed the issue on 2.0.1, thanks again!

  22. pedro vilela says:
    January 12th, 2011 09:42

    Ola, estou tendo problemas com input sem mascara que anulam todas as mascaras posteriores, vi o codigo mencionado pelo victor guedes mas ainda nao consegui fazer funcionar, alguem poderia dar uma explicação melhor.

    obrigado.

  23. Philip says:
    March 1st, 2011 08:45

    Will this plugin strip the mask before the value is submitted by the form. For instance, if someone inputs their credit card number into the field and it looks like “0000 0000 0000 0000″ Will the form submit the value as “0000000000000000″?

  24. Fiote says:
    March 1st, 2011 11:24

    Philip, no. The mask go with the value.

  25. klesk says:
    April 14th, 2011 07:29

    Hi, I add mask to “Meio.Mask.createMasks” such as ‘Taux’ : {mask: ’9.9mg/L’},

    it work great exept for the “m” char wich is evauated as “month”. Is it possible to escape or something else to use this char as a char ?

  26. klesk says:
    May 5th, 2011 07:46

    Hi, I’m comming with other proposition/problèmes.

    • In reverse It’s impossible to use the minus char ( – ) if we have negative integers. If i whant 0.23 i’cant !

    Nota : https://github.com/fabiomcosta/mootools-meio-mask/raw/master/Build/Meio.Mask.min.js

    Return 404 !

    Thx

  27. Felipe says:
    May 12th, 2011 14:22

    Hi, how can I customize a reverse.decimal field to limit its length to 5 chars?

    I was using this example provided at /Specs/user/index.html:

    reverse.decimal Mask:

    I tried setting a mask parameter within data-meiomask-options, as seen above, but it’s ignored.

    Anyone can help me out??

  28. Felipe says:
    May 12th, 2011 14:24

    My previous post is quite unreadable now, but the relevant part is this:

    data-meiomask-options=”{autoEmpty: true, mask: ’99,99′}” data-meiomask=”reverse.decimal”

  29. pimsainnum says:
    May 25th, 2011 12:10

    I looking for javascript Inputmask about credit card. For example Input box key “AAAAAAAAAAAAAAA…” Will be automatic change to “AAAA-AAAA-AAAA-AAAA”

    Can you help me?

  30. Mr B says:
    May 29th, 2011 07:07

    Hi Fabio, is the jQuery documentation valid under the Mootools version?? I can’t figure out how to add my own mask to the Fixed array. For now I’ve just added my entry to the source file. Any help?

    Tx

  31. Bruno Batista says:
    August 11th, 2011 11:43

    Does not work with Joomla!, Conflict with mootools.js

    Can anyone help?

  32. Adrodrigues says:
    September 16th, 2011 11:51

    Hi, how can I customize a field to negative current or percent?

  33. Charlie D. says:
    September 16th, 2011 12:02

    It does not work on Android tablets browsers. Any fix for that?

  34. Alexandre says:
    September 16th, 2011 12:04

    Como customizar a mascara para que ela aceite o “hífen” para determinar numeros negativos tipo pocentagem ou monetário? Obrigado!

  35. Claudio says:
    October 1st, 2011 22:18

    Answer to Bruno Batista:

    It does work with Joomla. When you set the mootools selector ($$) it should only ‘select’ the fields that you want to apply masks. If it includes ny field with no meio.mask properties it will break.

  36. Janie says:
    December 20th, 2011 19:01

    I want to have a time mask with 12 hours instead of 24 hours format, am/pm is not necessary, how could I do that?

    I tried to change ‘Time’:{mask: ’2h:59′} to ‘Time’:{mask: ’1h:59′} in Meio.Mask.Fixed.js file, but it doesn’t work.

    Could you give me some suggestions?

    Thanks.

  38. Abner says:
    February 2nd, 2012 19:11

    Excelente!

  39. Doug Wilcox says:
    February 19th, 2012 21:23

    For those who wanted to know how to do a mask that sets a specific length or a specific number of decimal places, the following shows how to set a one-digit decimal with a maximum length (including the decimal) of 5 digits:

    $(‘myFieldId’).meiomask(‘reverse.decimal-us’, {autoEmpty: true, precision: 1, maxLength: 5});

    Use the ‘precision’ option to set the decimal places, and use the ‘MaxLength’ option to set the total length of the accepted input, including the decimal point.

  40. Fagner Martins says:
    March 12th, 2012 17:41

    A mask plugin should be simple, nothing more than ELEMENT.mask(“MODEL”) or ELEMENT.mask(“MODEL”, { options: “here” }).

    With a fast look I could see in the examples that it needs data- attributes (not a bad idea but it could be confusing for someone looking for properties of a javascript plugin inside html), and the plugin call is a mess.

    Maybe that’s mootools pattern (never used that FW), but I personally did’nt liked so much.

  41. Fagner Martins says:
    March 12th, 2012 17:47

    Ok I didnt pay attention to the examples, ignore my comment above :D

  42. DissidentRage says:
    May 8th, 2012 14:46

    How do you unset a mask? The documentation on this is non-existent.

  43. ilan says:
    June 22nd, 2012 00:23

    Is it possible to “autocomplete” an input value. For example, when the user fills “8″ in TIME field and leavs the field, the mask function will set it to “08:00″

  44. DissidentRage says:
    July 26th, 2012 12:29

    Another bug that you will probably never fix.

    If you insert a value via Javascript and then give focus to that element again, it uses the value from before the insertion.

  45. fabiomcosta says:
    July 26th, 2012 22:14

    @ DissidentRage I tried sending you an email right now but it couldn’t be sent.

    Why are you saying this? What was the other bug that didn’t get fixed?

    Try filling an issue on github, I recently fixed some bugs there.

    https://github.com/fabiomcosta/mootools-meio-mask

    Peace.

  46. EffetB says:
    November 2nd, 2012 06:00

    Hi, In Meio.Mask.js, I think there is a problem with the keydown method when you type a character like { (or any character obtained by pressing alt gr + key). If you do so the character is displayed even if it shouldn’t (tested in jsfiddle). If you replace the line : this.ignore = (Meio.Mask.ignoreKeys[e.code] && !o.isRemoveKey) || e.control || e.meta || e.alt; by this : this.ignore = (Meio.Mask.ignoreKeys[e.code] && !o.isRemoveKey) || (e.control && !e.alt) || e.meta || (e.alt && !e.control); the character won’t be desplayed with this modification. Thank you for this nice script.

  47. DissidentRage says:
    March 12th, 2013 16:11

    fabio: I put up an Issue on GitHub 2 months ago that hasn’t been addressed…

Leave a Reply