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:
be sure to include the necessary require in the template:
or register it globally:
aureliause ... ...
If you have 1.2 or later (and aren't using webpack) you can just reference the package:
may need to be this if you're using npm:
aureliause ... ...
notes
- do not apply a value binding to the input, that will interfere with the plumbing
<!-- bad! -->
- 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:
and in your view model
thismasker;
Options
placeholder
the default placeholder char is '_'. You can override it.
mask | ui value | model value |
---|---|---|
(999) 999-9999 | (***) ***-**** | '' |
special case for 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:
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
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 = var result = masker;;
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.
Currently only works with aspnet mode.
change event
you can specify a callback on change:
- don't use change.trigger on the input
- don't use BindingEngine on myvalue