Input mask

[cornae]

An input mask allows for formatting a text input field upon blur or key up. This in order to accommodate for data input that requires a special formatting to either look natural, reduce risk of errors, assist the user in entering complexly formatted data or to accommodate validation.

Examples include: input fields with phone numbers, bank account numbers, postal codes, etcetera.

The suggested class for this pattern would be pat-input-mask, which could be placed on input fields that do not have type radio or checkbox, as well as textareas.

Formatting syntax

The designer may specify the desired format with the property: data-pat-input-mask="format: 9999 XX"

The value could be any combination of numbers, letters and interpunction marks.

Upon blur or keyup, the pattern will make the entered data match structure of the desired format. Should any interpunction marks be used by the user, but the same interpunction mark is also part of the format property value, then the one the user has entered will be removed upon keyup or blur.

Note: It could be considered to use the HTML5 'pattern' attribute instead or additionally. The disadvantage is that this attribute expects a regular expression, which many designer are not capable of writing.

Strip from post

Sometimes it's desired or even required to send properly formatted fields to the server and in other cases the opposite is desired.

With the property submit: the designer/developer may choose what should happen when the form is submitted. The valid values are stripped and formatted. When stripped is chosen, then the input field will be stripped from the applied formatting, before sending to the server.

Note for dev: It might be sufficient to simply strip from non alpha-numeric characters for the stripped mode.

Paste

Formatting happens always after a paste event in the input field.

Radix-point choice/Currency

With the property radix-character: the designer may choose which radix-character is used. Any (unicode) character can be entered.

In most countries the comma is default (making the dot the default for the thousands separator) so this is the default. In case a . is entered as a radix-character, then the thousands separator becomes automatically a comma.

Both Radix-characters and thousands separators are not possible in combination with type="number".

Note: A property type: currency/decimal could be considered to make proper formatting possible on inputs with type="text". Opinions?

Existing libs

Libraries in existence that cover (part) of above requirements include:

• http://digitalbush.com/projects/masked-input-plugin/
• http://www.decorplanit.com/plugin/

But I trust there are more and better ones that could be used.