JavaScripTools Manual

InputMask

Working with the NumberMask

NumberMask is a mask that accepts only numbers, and uses a NumberParser to format and parse the text on an input field. Several mask instances can (and should!) share a single parser.

The NumberParser instance is passed on the constructor, as well as the field name or reference. Optionally, it can receive a third argument, the maximum digits on the integer part. The other constructor parameters are event handlers, and are not recommended to be passed on the constructor. For more details on the event handlers, see here.

The mask can be typed from left to right or from right to left. Many applications (specially for currencies) prefer the right to left, so, it's the default. In this mode, assuming 2 decimal places, if the user presses, in this order, 123456, the resulting number is 1.234,56. Only numbers are typed. In this mode, the parser is required to restrict the number of digits on the decimal part (using the decimalDigits property). On the left to right mode, to type the same number, the user should type 1234,56 (including the decimal separator). This mode is better if more decimal places are accepted. Unlimited decimal digits is also supported in this mode. To set the typing mode, set the leftToRight property with a boolean value (true means left to right and false means right to left).

The number of digits on the integer part may be limited using the maxIntegerDigits property (-1 means no limit). The NumberMask may also accept or not the user to change the number signal (using the minus key) with the allowNegative property.

It is also possible to set / retrieve the input text using numbers, with the setAsNumber(number) and getAsNumber() methods.

Here are some examples (assuming an input field called myNumber):

//We need a NumberParser instance
var parser = new NumberParser(...);

//Here is the basic usage
new NumberMask(parser, "myNumber");

//Now we will customize it a little
var mask = new NumberMask(parser, "myNumber");
mask.allowNegative = false;
mask.leftToRight = false;

//Assigning the value with a number
mask.setAsNumber(1234.56); //Would display something like "1.234,56" on the input

//Retrieving the value as a number
alert(mask.getAsNumber() * 3);