tianyawy / aurelia-mask Goto Github PK

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.

• aurelia

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

npm install aurelia-mask

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")
    ...

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

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

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

special case for space:

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

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

you can override this:

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

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;" />

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.

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.