J Query Masked Input

Homepage: http://digitalbush.com/projects/masked-input-plugin
Author(s): Josh Bush
Version: 1.4.1

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)

Usage

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)

JavaScript API

$("#date").mask("99/99/9999");
$("#phone").mask("(999) 999-9999");
$("#tin").mask("99-9999999");
$("#ssn").mask("999-99-9999");

Use a space instead of an underscore "_" character as a placeholder

$("#product").mask("99/99/9999",{
  placeholder:" "
});

Adda "completed" callback:

$("#product").mask("99/99/9999",{
  completed: function() {
    alert("You typed the following: "+this.val());
  }
});

Define an own mask:

$.mask.definitions['~']='[+-]';
$("#eyescript").mask("~9.99 ~9.99 999");

Foswiki integration

Use the jqMaskedInput class name to enable masked input on an input element. The mask itself is specified in the mask attribute.

Examples