https://github.com/networkteam/ember-cli-maskedinput
Masked <input/> Ember component based on inputmask-core (no jQuery)
https://github.com/networkteam/ember-cli-maskedinput
Last synced: about 2 months ago
JSON representation
Masked <input/> Ember component based on inputmask-core (no jQuery)
- Host: GitHub
- URL: https://github.com/networkteam/ember-cli-maskedinput
- Owner: networkteam
- License: mit
- Created: 2016-03-30T16:07:45.000Z (almost 10 years ago)
- Default Branch: master
- Last Pushed: 2023-07-26T14:39:45.000Z (over 2 years ago)
- Last Synced: 2025-10-19T10:25:04.586Z (5 months ago)
- Language: JavaScript
- Size: 67.4 KB
- Stars: 25
- Watchers: 1
- Forks: 11
- Open Issues: 5
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE.md
Awesome Lists containing this project
README
[](https://travis-ci.org/networkteam/ember-cli-maskedinput)
[](https://emberobserver.com/addons/ember-cli-maskedinput)
[](https://badge.fury.io/js/ember-cli-maskedinput)
# Ember masked-input
This addon provides a `` Glimmer component that applies input masking based on [inputmask-core](https://github.com/insin/inputmask-core).
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](https://github.com/insin/inputmask-core) library and adapted from its React implementation [MaskedInput](https://github.com/insin/react-maskedinput).
## Compatibility
* Ember.js v3.20 or above
* Ember CLI v3.20 or above
* Node.js v14 or above
## Installation
``` sh
ember install ember-cli-maskedinput
```
## Usage
**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
```
## Reference
### `mask`
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](https://github.com/insin/inputmask-core#pattern) for more information.
### `formatCharacters`
An object defining additional format characters, see [inputmask-core docs](https://github.com/insin/inputmask-core#formatcharacters) for more information.
### `placeholderChar`
The character which is used to fill in editable positions that have no input. Defaults to `_`; must be a single character.
### `on-change`
An optional function to handle `change` events.
## License
[MIT Licensed](LICENSE.md)