Skip to content

Masked <input/> Ember component based on inputmask-core (no jQuery)

License

Notifications You must be signed in to change notification settings

Gtlogic/ember-cli-maskedinput

 
 

Repository files navigation

Build Status Ember Observer Score npm version

Ember masked-input

This addon provides a <MaskedInput> Glimmer component that applies input masking based on 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 library and adapted from its React implementation MaskedInput.

Compatibility

  • Ember.js v3.20 or above
  • Ember CLI v3.20 or above
  • Node.js v14 or above

Installation

ember install ember-cli-maskedinput

Usage

Basic usage

Pass the value to display and a on-change function as args to the MaskedInput component:

<MaskedInput @mask='A1111' @value={{this.myValue}} @on-change={{fn this.updateMyValue}} />
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

<MaskedInput @mask='11/11/1111' @value={{this.myValue}} @on-change={{fn this.updateMyValue}} />

Credit card pattern

<MaskedInput @mask='1111 1111 1111 1111' @value={{this.myValue}} @on-change={{fn this.updateMyValue}} />

Time pattern with validation

Uses plain HTML5 validation by setting HTML attributes:

<MaskedInput @mask='11:11:11' required pattern='[0-9]{2}:[0-9]{2}:[0-9]{2}' title='Time value with format HH:MM:SS' />

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 for more information.

formatCharacters

An object defining additional format characters, see inputmask-core docs 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

About

Masked <input/> Ember component based on inputmask-core (no jQuery)

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • JavaScript 83.6%
  • HTML 7.9%
  • Handlebars 7.1%
  • Perl 1.4%