The best place to find jQuery plugins !

Welcome on myjqueryplugins,

the best jquery plugins library !

Add your jQuery plugin.

Connect it with GitHub and create your plugin Homepage.

Make known your plugin to the community or link it to your own website !

Masked Input Plugin : Enter input data in a certain format

Tags :

Plugin rate :

This 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).

It has been tested on Internet Explorer, Firefox, Safari, Opera, and Chrome.

 

A mask is defined by a format made up of mask literals and mask definitions. Any character not in the definitions list below is considered a mask literal. Mask literals will be automatically entered for the user as they type and will not be able to be removed by the user.The following mask definitions 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)
Implementation: 

1. HTML CODE

The following example is a demonstration from the usage tab.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
<table border="0">
  <tbody>
    <tr>
      <td>Date</td>
      <td><input id="date" tabindex="1" type="text" /></td>
      <td>99/99/9999</td>
    </tr>
    <tr>
      <td>Phone</td>
      <td><input id="phone" tabindex="3" type="text" /></td>
      <td>(999) 999-9999</td>
    </tr>
    <tr>
      <td>Phone + Ext</td>
      <td><input id="phoneext" tabindex="4" type="text" /></td>
      <td>(999) 999-9999? x99999</td>
    </tr>
    <tr>
      <td>Tax ID</td>
      <td><input id="tin" tabindex="5" type="text" /></td>
      <td>99-9999999</td>
    </tr>
    <tr>
      <td>SSN</td>
      <td><input id="ssn" tabindex="6" type="text" /></td>
      <td>999-99-9999</td>
    </tr>
    <tr>
      <td>Product Key</td>
      <td><input id="product" tabindex="7" type="text" /></td>
      <td>a*-999-a999</td>
    </tr>
    <tr>
      <td>Eye Script</td>
      <td><input id="eyescript" tabindex="8" type="text" /></td>
      <td>~9.99 ~9.99 999</td>
    </tr>
  </tbody>
</table>

2. INCLUDE PLUGIN FILE

1
<script type="text/javascript" src="http://digitalbush.com/wp-content/uploads/2013/01/jquery.maskedinput-1.3.1.min_.js"></script>

3. JAVASCRIPT CODE

1
2
3
4
5
6
7
8
9
10
jQuery(function($) {
      $.mask.definitions['~']='[+-]';
      $('#date').mask('99/99/9999');
      $('#phone').mask('(999) 999-9999');
      $('#phoneext').mask("(999) 999-9999? x99999");
      $("#tin").mask("99-9999999");
      $("#ssn").mask("999-99-9999");
      $("#product").mask("a*-999-a999",{placeholder:" ",completed:function(){alert("You typed the following: "+this.val());}});
      $("#eyescript").mask("~9.99 ~9.99 999");
   });

Screenshots
  • Demo

Comments

I am using jquery.maskedinput-1.3.min.js

And I keep getting this error onblur from one input box to an other

TypeError: input.data(...) is not a function
[Break On This Error]

return input.data($.mask.dataName)();

no idea what it is..

the return of input in the js returns this following.

function (a){if(f.isFunction(a))return this.each(function(b){var c=f(this);c.text(a.call(this,b,c.text()))});if(typeof a!="object"&&a!==b)return this.empty().append((this[0]&&this[0].ownerDocument||c).createTextNode(a));return f.text(this)}

Any help please? Thanks in advance.

Thanks, yours was the third masking jquery code I tried and the first one to work. Perfect!

Thanks, it really very helpful and perfectly worked.

Good article ,Its relay help full for me

check this one
http://jqueryriver.blogspot.in/2014/12/top-10-stylish-jquery-masked-inputs.html

I want 'A' as character not for alphabet. Character 'A' would be fixed character.

Pls help

My pages content replaced by Ajax. After content replaced by Ajax mask input plugin not working. How can I handle this? Please help me?

Add new comment

To prevent automated spam submissions leave this field empty.

Plain text

  • Lines and paragraphs break automatically.
  • Allowed HTML tags: <p> <br> <br />

Informations

jQuery
>= 1.3
Current version
1.3.1
Browsers compatibility
Google ChromeIE 7IE 8IE 9Mozilla FirefoxOperaSafari
Comments [6]