This is a port of Angular's UI-Mask to Aurelia.

Apply a mask on an input field so the user can only type pre-determined pattern.

Requirements

• aurelia

Installation

jspm

jspm install aurelia-mask=github:ariovistus/aurelia-mask

npm

npm install aurelia-mask

Usage

in your template:

<input masked="value.bind: myvalue; mask.bind: mymask" />

be sure to include the necessary require in the template:

<require from="aurelia-mask/masked-input"></require>

or register it globally:

aurelia.use
    .standardConfiguration()
    ...
    .globalResources("aurelia-mask/masked-input")
    ...

If you have 1.2 or later (and aren't using webpack) you can just reference the package:

<require from="aurelia-mask"></require>

may need to be this if you're using npm:

aurelia.use
    .standardConfiguration()
    ...
    .globalResources("aurelia-mask/dist/masked-input")
    ...

notes

• do not apply a value binding to the input, that will interfere with the plumbing

    <!-- bad! -->
    <input masked="..." value.bind="myvalue" />

• mask has the same format as default ui-mask
  • 9 → number
  • a → alpha
  • * → number or alpha

Two way binding

Seamless two way binding causes issues. If you need to change the model value from code, you can do the following:

    <input masked="..." masked.ref="masker" />

and in your view model

    this.masker.setValue(myvalue);

Options

placeholder

the default placeholder char is '_'. You can override it.

<input masked="value.bind: myvalue; mask: (999) 999-9999; placeholder: *" />

| mask | ui value | model value | | ---- | -------- | ----------- | | (999) 999-9999 | (***) ***-**** | '' |

special case for space:

<input masked="value.bind: myvalue; mask: 99/99; placeholder: space" />

| mask | ui value | model value | | ---- | -------- | ----------- | | (999) 999-9999 | '( ) - ' | '' |

bind-masking

by default, any punctuation characters are stripped out of the value, e.g:

| mask | ui value | model value | | ---- | -------- | ----------- | | (999) 999-9999 | (800) 888-8888 | 8008888888 |

you can override this:

<input masked="value.bind: myvalue; mask: (999) 999-9999; bind-masking: true" />

| mask | ui value | model value | | ---- | -------- | ----------- | | (999) 999-9999 | (800) 888-8888 | (800) 888-8888 |

aspnet masking

don't know what to call this, but sometimes you want a more relaxed mode where you can enter characters at any position, not just the start

<input masked="value.bind: myvalue; mask: (999) 999-9999; aspnet-masking: true;" />

| mask | ui value | model value | | ---- | -------- | ----------- | | /999/999/9999/ | /__0/_8_/8888/ | /__0/_8_/8888/ |

The masker object exposes a function to strip off the placeholder characters:

var masker = getMasker({maskFormat: "/999/999/9999/", aspnetMasking: true})
var result = masker.stripPlaceholders("/__0/_8_/8888/");
expect(result).toBe("/0/8/8888/");

not that that's hard to do yourself. have yet to figure out how to incorporate it in the binding.

edit mode

by default it is insert. You can also specify overtype mode.

<input masked="value.bind: myvalue; mask: (999) 999-9999; edit-mode: overtype" />

Currently only works with aspnet mode.

change event

you can specify a callback on change:

<input masked="value.bind: myvalue; mask: 9; change.call: onChange()" />

• don't use change.trigger on the input
• don't use BindingEngine on myvalue