WebAppers

/ best free open source web resources /

Shopify

jQuery Masked Input Plugin

Posted · Category: Forms, License Free

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)

Input Mask Plugin

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

9 Comments
  • http://m4c.pl m4c

    Very nice! Thx

  • http://blog.olicio.us/ Oskar Krawczyk
  • 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..

Supported By

Deals

Web Browsers Icon Set
Food Icon Set
Flat Icon Set

Flat Icon Set

100 icons