JQIMaskContrib

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:

1. assign the .imask css class to an html element
2. 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-type	input type	currency
data-thousands-separator		none
data-scale	digits after the radix, use 0 for integer value	2
data-pad-fractional-zeros		true
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="currency" class="imask" data-type="currency" value="123.45" />

Date

Parameter	Descrition	Default
data-type	input type	date

Time

Parameter	Descrition	Default
data-type	input type	time

Example:

<input type="text" name="time" class="imask" data-type="time" value="23:59" />

Emum

Parameter	Descrition	Default
data-enum	comma separated list of allowed strings	undef
data-type	input type	enum

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

Parameter	Descrition	Default
data-type	input type	range
data-from	minimum numeric value
data-to	maximum numeric value

Example:

<input type="text" name="range" class="imask" data-type="range" data-from="0" data-to="99" value="123" />

IPv4

Parameter	Descrition	Default
data-type	input type	ipv4

MAC

Parameter	Descrition	Default
data-type	input type	mac

CIDR

Parameter	Descrition	Default
data-type	input type	cidr

Regex

Parameter	Descrition	Default
data-type	input type	regex
data-mask	regex	undef

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