MaskElementFactory

MaskElementFactory Formats input as the user types, from either a named mask (tel, date, …) or a raw pattern such as 99-9999-9999. Keeps the caret in a sensible place while editing and sets inputMode so mobile keyboards match the expected characters.

Generated from source on 2026-08-21. Descriptions come from JSDoc in the file.
Re-run docs_scaffold when the code changes; hand edits are lost on regeneration

Source

• File: Now/js/MaskElementFactory.js (603 lines)
• Form: ES class

Public methods (5)

static calculateMaskStructure(maskPattern)

Split a mask pattern into its input groups and the separators between them. For 99-9999-9999 this yields groups of 2, 4 and 4 with - as separator, which is what the formatter needs to place characters and move the cursor.

static formatValue(value, maskConfig, previousValue = '', inputCursorPos = 0)

Format raw input against a mask and work out where the caret should land. Separators are stripped from the incoming value first, so the result is stable whether the user typed them or not. The previous value and caret position are used to keep the caret sensible while editing mid-string.

static setupElement(instance)

Apply the resolved mask to the element. Sets inputMode so mobile keyboards match the mask, and fills in a placeholder from the mask when the element does not already declare one. Elements with no usable mask are left untouched.

static setupEventListeners(instance)

Bind the input, change and blur handlers that keep the masked value formatted. Which of the three are bound depends on maskOnInit, maskOnChange and maskOnBlur in the factory config.

static setupMask(instance)

Work out which mask an element should use and attach it to the instance. Resolved in order: an explicit config.mask object, a named mask from config.format (tel, date and the rest of config.masks), then a raw config.pattern. A pattern without a placeholder gets one generated by replacing its input characters with placeholderChar.

Depends on

ElementManager · EventSystemManager · FormError