Leave a comment

20 comments on InputMask Class for MooTools

STB posted on 23rd February 2010

Wery useful plugin. Thanks for demo.

dlh posted on 25th January 2010

This is a great script. I also would like to see support for currency or reals. Something like d*.99 for a format would be great. Another thought would be to allow entry of the '.' (in this case) and move the insertion point to after the period. This would also allow one to define a mask like 999999.99 and enter keys 1.25 or to enter a date using character sequences: 1/9/2010 (which might then be formated to the mask).

I just noticed one critical problem - when you tab through a field - it gets cleared. This is not what one would expect, and will lead to loss of pre-entered data.

I've fixed my copy by adding (at least it seems to work):
if (e.key == 'tab') return true;
to the second line of keypress: function(e, element)

It would be nice to have a rangeOf() along with upTo() this would solve a date: 00/00/00000 entry problem. Although I see how it would be tricky to fit into this framework.

Thanks
Dave

davidck posted on 30th October 2009

Hi, thanks, this script seems useful. I'm having an issue though. I'm making a simple rule that does currency. I have something like this as rule: '999,999'

The problem with this is when I type in 1000, I expect 1,000. Instead, I get 100,0. Which makes sense, but is there a way to make the pattern matching reversable?

Adriaan Nel posted on 27th October 2009

This is very handy, thanks, I'll definitely be using it..., but now after reading REV087's post below, I agree with him...

Diego posted on 20th October 2009

Hi.
Very nice work. Really.

Can I ask U some help?
It's possible to define a mask for reals, without set a string lenght?

Tks.

(Sorry for my english)

rev087 posted on 25th September 2009

(caution: bad engrish follows)

One of the main issues with all the javascript input masks I've tested so far, is that you sacrifice a lot of default functionality that the user expects.

I'm aware that the code should stay small and simple, but would it be possible to add support for moving the cursor back and forth with the arrow keys (and then deleting/backspacing)? The script could add a space in the removed character. Same for selecting while holding shift, and using the Home and End keys instead of arrows.

Again, this feature suggestion might be "overkill", and maybe not what you planned for the script, but I'd like to see the mask characters (like " / / " in the fields while they're empty. When I type on empty date/time fields on forms, I'm always unsure if I should type the "/" and ":" or there will be a surprise input mask.

Anyways, congrats for the script, seems really nicely coded. I've started some input mask scripts in the past myself, but gave up every time after thinking about all those features and failing to implementing them all in a nice, bug-free way -.-

ps.: nice shirt =D

Chris posted on 28th August 2009

Dammit :D I introduced this with yesterday's update - fixed now. Thanks for reporting

Robert posted on 28th August 2009

Hey, nice plugin.

But I think something is broken:
When I try to put 02/30/1991 into a date, it only allows me 02/30/19 and then nothing. 02/30/1881 or 02/30/2001 is ok.

thanks,
rt

Aaron Newton posted on 27th August 2009

Much better. I'm still not crazy about the pattern, but this is the most usable behavior I've yet seen.

Chris posted on 27th August 2009

Thank you for your comments so far. I've tried to fix that (ugly) bug where it allowed / in the date input. Apparently when doing a string comparison '/' <= '12' is true, didn't really think about that (Damn you Scott, you told me I don't need to convert to integer! ;P Anyway, it is my fault not converting the upTo value back to a number). I have added an additional check for the upTo method that checks if the field only contains numbers.

In addition to that I have also added an onError event which highlights the input field when you type something wrong.

Fábio M. Costa posted on 27th August 2009

I found out theres no way to make a bug-free inputmask plugin with some crazy, unreadable, code. People will always find a bug and sometimes you'll have to change your code in an ugly way to fix the bug.

I liked the way you did the fireEvent of the key events. Super compact.

I don't like your style too. JK. Not.

Gordon Tucker posted on 26th August 2009

Looks nice. I agree with Aaron about the masks making me think my keyboard was broken. Tried to type "4:30" instead of "04:30" and I thought I was going crazy :)

One small thing though. It allows you to type '/'. So if someone (like me) still types "10/10/09" (mostly out of habit), it will display 10//1/00 then stop.

Sean McArthur posted on 26th August 2009

I guess I meant that when deleting a character I didn't enter, it should delete two characters.

Delete at "10:" should leave me with "1", since I've only enter 2 characters, it feels weird to have to delete multiple times if I meant to type 11 or 12.

Aaron Newton posted on 26th August 2009

My issue with input masks is that they break the interface. If I put my cursor in an input and start typing, and nothing happens, I start looking to see if my keyboard is working. I think these masks should, instead, display values that are not valid in red, or display a message at least when I hit a key that isn't valid. If I'm supposed to put in "12:30" and I put in "12:30pm" and nothing happens when I hit "p", it's absolutely not clear that this is prevented by YOUR design and not by some other problem; my own error (my keyboard or something - is my "p" key not working???), something weird with my browser, who knows.

Chris posted on 26th August 2009

Sean: isn't that what it already does? ;)

Fabio: No offence here, but it is a jQuery port of your plugin and it is quite old already ;) And also, I usually don't like the code of most other people.

Chris Drackett: Good point. I need to come up with a clean solution for that though.
2 http://cpojer.net/blog/InputMask_Class_for_MooTools#comments 15
Page 1 of 2
Styx PHP Framework Contact Follow me on Twitter