IMask - Masked Input

Content Type: Widget
Categories: Data

Overview

The missing masked input for Mendix, based on https://imask.js.org/

Documentation

Demo url

IMaskWeb

The missing masked input for Mendix, based on https://imask.js.org/

Features

  • Apply a mask to your input to improve user experience when entering formatted values like postal codes, phone numbers, and order numbers
  • Overwrite mode
  • Lazy (hidden) masking
  • Custom placeholder characters
  • Custom mask character definitions

Usage

  1. Install the widget in your project.
  2. Place the widget on a page
  3. Connect an attribute, and enter a mask pattern, using the guide included (or view the full options here: https://imask.js.org/guide.html#masked-pattern)

Demo

Canadian Postal Code

sqBOEROMxA

US Phone Number

wpXSVxi937

OnAccept event

uAPCUfwYUV

Include fixed region in unmasked value:

C4rKWw4S1s

Issues, suggestions and feature requests

Please open an issue here: https://github.com/cdcharlebois/imask-web/issues

Development and contribution

Roadmap:

  • Custom Mask blocks (max/min, pattern, etc)
  • Dynamic Mask patterns (based on expression)
  • Save the masked value

Currently accepting pull requests

Releases

Version: 2.1.0
Framework Version: 8.6.3
Release Notes: This release respects the tab-index property set in Studio Pro
Version: 1.0.0
Framework Version: 8.6.3
Release Notes: This release is a new version of IMask based on the Mendix Pluggable Widget framework. See the [readme](https://github.com/cdcharlebois/imask-web) file for features, usage, contribution, and more.