custom-masks
Web icon

Custom Input Masks

Stable version 3.0.12 (Compatible with OutSystems 11)
Other versions available for 10 and Older
Uploaded
 on 23 July 2020
 by 
4.8
 (48 ratings)
We picked this asset for you. Give it a try.
input-masks-mobile
Reactive icon
Input Masks Library
Compatible with OutSystems 11 and 10
See morearrowrightdefaultarrowrighthover
custom-masks

Custom Input Masks

Details
Custom Input Masks uses a javascript library which creates an input mask. An input mask helps the user with the input by ensuring a predefined format. This can be useful for dates, currencies, numbers, phone numbers, emails, urls ... Using input masks you’ll get better and more consistent data, and it will be a lot easier for your users to read and enter that data.
Read more
Add a reference to the following web blocks in your module: MaskText, MaskNumber, MaskDate and MaskCurrency. All web blocks have one mandatory input parameter (InputID), which is the Id of the input widget you want to apply the input mask to.


Format price input using MaskCurrency:

  • How many decimal digits are allowed;
  • Prefix or suffix symbol (e.g. '$ ');
  • Decimal separator ("." or ",");
  • Group separator (".", "," or "\'").

Format date input using MaskDate:
  • This date format is defined by setting the order of the day (dd), month (mm) and year (yyyy), and also by setting the separator between them. For example, dd-mm-yyyy and yyyy/mm/dd are valid date formats.
  • Note that you cannot use the RichWidget Input_Calendar and the MaskDate on the same date input, or you will get wrong and unexpected values.

Format number input using MaskNumber:
  • How many decimal digits are allowed;
  • Decimal separator ("." or ",");
  • Group separator (".", "," or "\'").

Format text input using MaskText:
  • MaskDefinition (e.g. NIB - "9999-9999-9999-9999-9999 9")

Default:
  • 9: numeric
  • a: alphabetical
  • *: alphanumeric

Pre-defined masks:

  • ip
  • email
  • url

Dynamic Masks:

  • Optional: [...]
  • Quantified:

    • {n} => n repeats
    • {n,m} => from n to m repeats
    • {+}
    • {*}
  • Alternator: |


There’s also an optional input parameter in the MaskText and MaskCurrency blocks that allow you to toggle between keeping the mask or not when the input data is send to the server. By default this parameter is set to true in MaskText, and false in MaskCurrency block.

The input parameter AdvancedOptions is available in all web blocks, and here you can specify other options like clearMaskOnLostFocus, which allow you to show the mask even when the input element doesn’t have focus. In particular for the MaskText the boolean option autoUnmask can be useful too, in order to avoid sending the empty mask value to the server. You will find more information about this in the component documentation.

Release notes (3.0.12)

Updated plugin version: 5.0.0-beta.318

https://github.com/RobinHerbots/Inputmask

Reviews (4)
by 
2023-11-27
in version 3.0.12
Thanks! I tested 2 other solutions but only this one worked perfectly.
by 
2021-05-20
in version 3.0.12
Really usefull widget, I would only add a parameter for not printing the matches messages in the browser consle.
by 
2020-02-21
in version 3.0.7
In the latest version (3.0.7), the default value for decimal digits is 0 in MaskCurrency, but in fact, it always assumes 2 decimal digits
Team
Other assets in this category