Ember addons Working Input Mask

1

Good day,

I am here today because I am looking for a workable ember input mask addon(something similar to Jquery input mask) with my current version of ember: ember 3.15.0 ember-cli: 3.18.0-beta.1 node: 10.12.0

It is unfortunate that about the top 5 addons that does this in Ember Observer does not work for me. IF anyone has suggestions on a input mask addon would be great.

Thank you,

2

You can use the inputmask library directly (the same one as jquery input mask, AFAIK). Here’s how:

  1. Install the inputmask and ember-modifier NPM packages via npm install or yarn install.

  2. Make a modifier like:

    // app/modifiers/inputmask.js
import { modifier } from 'ember-modifier';
import Inputmask from 'inputmask';

export default modifier(function inputMask(element, params, hash) {
  new Inputmask(hash).mask(element);
});

  3. Now you can use the modifier on any <input> element like this:

    <input {{inputmask mask="(999) 999-9999" }} />
4 Likes
3

@ef4 thanks you. this worked like a charm. I ve not worked with ember-modifier before. I have to read up on this.

Thanks once again.

4

Yeah, modifiers are nice. The pre-octane equivalent would be to use a component and put the code in its didInsertElement method. But modifiers let you split things out more into composable pieces.