javascript input mask
Usage
This extension bundles the fantastic
imask.js package for Foswiki.
Masks may be assigned to an input field in a declarative way:
- assign the
.imask
css class to an html element
- use HTML5 data attributes to further parametrize
Syntax
Start by including
%JQREQUIRE{"imask"}%
into your page.
The input element is flagged with a css class
imask
. The type is specified in
data-type="..."
. Available types are:
- number
- currency
- date
- time
- enum
- range
- ipv4
- mac
- cidr
- regex
Number
Parameter |
Descrition |
Default |
data-type |
input type |
number |
data-thousands-separator |
|
none |
data-scale |
digits after the radix, use 0 for integer value |
999 |
data-pad-fractional-zeros |
|
false |
data-normalize-zeros |
|
true |
data-radix |
fraction delimiter |
. |
data-map-to-radix |
list of chars to map to the proper radix |
[","] |
Example:
<input type="text" size="5" name="number" class="imask" data-type="number" value="123.45" />
Currency
same as number but with different defaults
Parameter |
Descrition |
Default |
data-scale |
digits after the radix, use 0 for integer value |
2 |
data-map-to-radix |
list of chars to map to the proper radix |
["."] |
data-radix |
fraction delimiter |
, |
data-type |
input type |
currency |
data-thousands-separator |
|
none |
data-pad-fractional-zeros |
|
true |
data-normalize-zeros |
|
true |
Example:
<input type="text" size="5" name="currency" class="imask" data-type="currency" value="123.45" />
Date
Time
Example:
<input type="text" name="time" class="imask" data-type="time" value="23:59" />
Emum
Example:
*Enum*: <input type="text" name="enum" class="imask" data-type="enum" data-enum="Jan,Feb,Mar,Apr,May,Jun,Jul,Aug,Sep,Oct,Nov,Dec" value="Jan" />
Range
Example:
<input type="text" name="range" class="imask" data-type="range" data-from="0" data-to="99" value="123" />
IPv4
MAC
CIDR
Regex
Installation Instructions
You do not need to install anything in the browser to use this extension. The following instructions are for the administrator who installs the extension on the server.
Open configure, and open the "Extensions" section. "Extensions Operation and Maintenance" Tab → "Install, Update or Remove extensions" Tab. Click the "Search for Extensions" button.
Enter part of the extension name or description and press search. Select the desired extension(s) and click install. If an extension is already installed, it will
not show up in the
search results.
You can also install from the shell by running the extension installer as the web server user: (Be sure to run as the webserver user, not as root!)
cd /path/to/foswiki
perl tools/extension_installer <NameOfExtension> install
If you have any problems, or if the extension isn't available in
configure
, then you can still install manually from the command-line. See
https://foswiki.org/Support/ManuallyInstallingExtensions for more help.
Dependencies
None
Change History
26 Jan 2024 |
initial release |