Lightweight masked input fields without jQuery based on inputmask-core
npm install ember-cli-maskedinput
This addon provides a
There are no dependencies on jQuery plugins so this addon is a more lightweight and faster alternative to other input masking addons. It's based on the solid inputmask-core library and adapted from its React implementation MaskedInput.
* Ember.js v3.20 or above
* Ember CLI v3.20 or above
* Node.js v14 or above
`` sh`
ember install ember-cli-maskedinput
Basic usage
Pass the value to display and a on-change function as args to the MaskedInput component:
` hbs`
`js
import Component from "@glimmer/component";
import { tracked } from "@glimmer/tracking";
export default class MyComponent extends Component {
@tracked myValue = 0;
@action
updateMyValue(e) {
this.myValue = e.target.value;
}
}
`
Date pattern
` hbs`
Credit card pattern
` hbs`
Time pattern with validation
Uses plain HTML5 validation by setting HTML attributes:
` hbs`
A pattern consisting of 1 (number), a (letter), A (letter forced upper case), * (alphanumeric), # (alphanumeric forced upper case) or any other character for static parts of the mask. Use backslashes to escape format characters.
See inputmask-core docs for more information.
An object defining additional format characters, see inputmask-core docs for more information.
The character which is used to fill in editable positions that have no input. Defaults to _; must be a single character.
An optional function to handle change` events.