22 Apr

jQuery Masked Input Plugin

Forms, License Free

Leave a Comment

Masked Input Plugin is a masked input plugin for the jQuery javascript library. It allows a user to more easily enter fixed width input where you would like them to enter the data in a certain format (dates,phone numbers, etc).

A mask is defined by a format made up of mask and placeholder characters. Any character not in the placeholder character list below is considered a mask character. Mask characters will be automatically entered for the user as they type and will not be able to be removed by the user. The following placeholder characters are predefined:

* a – Represents an alpha character (A-Z,a-z)
* 9 – Represents a numeric character (0-9)
* * – Represents an alphanumeric character (A-Z,a-z,0-9)

It has been tested on Internet Explorer 6/7, Firefox 1.5/2, Safari, and Opera. The file size is very small with only 7.3k and 2.8k for the Packed version.

Requirements: jQuery Framework
Demo: http://digitalbush.com/projects/masked-input-plugin
License: License Free

Sponsors

Comments

http://m4c.pl m4c

Very nice! Thx
http://blog.olicio.us/ Oskar Krawczyk

Mootools-based precursor: http://sentry.case.edu/moo/mooMask/mooMask.html
arthemisia

And with prototype ?
http://kim.steinhaug.com/ Kim Steinhaug

I was hoping for a prototype version aswell, however it’s maby time soon for diving more into the libraries as I see more and more cool stuff appearing with jQuery. Maby the neatest thing, probably easiest I don’t know – would be for prototybe, mootools and jQuery to be able to run side by side. Sure this is a major overhead with libraries, but it would make us be able to use the best of all worlds.

It does look sweet though!
http://fedmich.com fedmich

great idea but I encountered a bug…
I’m using tabs while I type values, after inputting aa-323-a323 on productkey (wrong) an alert shows, and then the 2 inputs (product and eye script) keeps getting focus endlessly. I had to refresh the page to stop it…

Thanks anyway
http://blog.olicio.us/ Oskar Krawczyk

@Kim, when running all these side-by-side is pretty much undoable, running them in dependance-mode is something you might look forward to. Basically by dependance-mode I mean, you use a preferred framework on different subpages with some kind of fancy module-switcher (I’m guessing people call that On-Demand Javascript).
http://kim.steinhaug.com/ Kim Steinhaug

@Oskar Krawczyk, thanks for the input. I agree that running all the libraries is pretty much a crazy idea – and probably I would encounter alot of problems aswell. I have recently incorporated Prototype and Scriptaculous into all our projects, but it’s so easy falling in love with all theese fine widgets popping out in all the other libraries aswell.

We want them all, However when that is said, one cannot expect everybody else to do the hard work all the time!
Andreas

How do you define time? I would like something similar to this regex pattern: ^([0-1][0-9]|[2][0-3]):([0-5][0-9])$ (allow 12:54 but not 25:54)
http://TiPE-media.de.ms Tim

How to define a german telphone-number? Something like 06101-12345789 or 069-123456 or 030-12345..

Open Source Resources for You

What we need is a list of the top quality resources, so that we can spend more time on our web development. WebAppers only picks the top quality web development resources for you.

© Copyright 2012 WebAppers | About | Archives | Privacy Policy | Advertise | Contact