JQueryMaskedInput < System

You are here: BACCHUS Wiki>System Web>JQueryPlugin>JQueryMaskedInput (revision 1) (raw view)

---+ %TOPIC%
%JQPLUGINS{"maskedinput"
  format="
    Homepage: $homepage <br />
    Author(s): $author <br />
    Version: $version
  "
}%

%STARTSECTION{"summary"}%
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 6/7, Firefox 1.5/2/3, 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.
%ENDSECTION{"summary"}%

---++ 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
<verbatim class="js">
$("#date").mask("99/99/9999");
$("#phone").mask("(999) 999-9999");
$("#tin").mask("99-9999999");
$("#ssn").mask("999-99-9999");
</verbatim>

Use a space instead of an underscore "_" character as a placeholder
<verbatim class="js">
$("#product").mask("99/99/9999",{
  placeholder:" "
});
</verbatim>

Adda "completed" callback:
<verbatim class="js">
$("#product").mask("99/99/9999",{
  completed: function() {
    alert("You typed the following: "+this.val());
  }
});
</verbatim>

Define an own mask:
<verbatim class="js">
$.mask.definitions['~']='[+-]';
$("#eyescript").mask("~9.99 ~9.99 999");
</verbatim>

---++ 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
%JQREQUIRE{"maskedinput"}%

<div class="foswikiFormSteps">
  <form>
  <div class="foswikiFormStep">
    <h3>Date:</h3>
    <input type="text" size="10" class="jqMaskedInput" mask="99/99/9999" />
  </div>
  <div class="foswikiFormStep">
    <h3>Phone:</h3>
    <input type="text" size="10" class="jqMaskedInput" mask="(999) 999-9999" />
  </div>
  <div class="foswikiFormStep">
    <h3>Product Key:</h3>
    <input type="text" size="10" class="jqMaskedInput" mask="a*-999-a999" />
    <div class="foswikiFormDescription">
     Enter your product key of the form =a*-999-a999=.
    </div>
  </div>
  <div class="foswikiFormStep foswikiFormLast">
    %BUTTON{"Submit" icon="tick" type="submit"}%
    %CLEAR%
  </div>
  </form>
</div>

Topic revision: r1 - 12 Feb 2010, ProjectContributor

System

Copyright &© by the contributing authors. All material on this site is the property of the contributing authors.
Ideas, requests, problems regarding BACCHUS Wiki? Send feedback