Sign Up for Free

RunKit +

Try any Node.js package right in your browser

This is a playground to test code. It runs a full Node.js environment and already has all of npm’s 1,000,000+ packages pre-installed, including ember-text-mask with all npm packages installed. Try it out:

var emberTextMask = require("ember-text-mask")

This service is provided by RunKit and is not affiliated with npm, Inc or the package authors.

ember-text-mask v6.1.2

Ember input component that accepts mask pattern

Ember Input Mask

Getting started

First, install it.

ember install ember-text-mask

Then, use it as follows:

Add the following markup to your template to render a masked input component.

{{masked-input mask=mask}}

In the template's controller, specify a mask.

import Controller from '@ember/controller';

export default Controller.extend({

  mask: ['(', /[1-9]/, /\d/, /\d/, ')', ' ', /\d/, /\d/, /\d/, '-', /\d/, /\d/, /\d/, /\d/]

});

Documentation

📍 For more information about the attributes that the masked-input component accepts, see the documentation here.

Other use-cases

Unmasking the value that is stored in the model

Text Mask does not provide an option to unmask the model before storing it. You can sanitize the model on your side. See here for details.

Example

To see an example of the code running, follow these steps:

  • Clone the repo, git clone git@github.com:text-mask/text-mask.git
  • cd text-mask/ember
  • npm install
  • bower install
  • ember serve
  • Open http://localhost:4200

You should have a working demo.

RunKit is a free, in-browser JavaScript dev environment for prototyping Node.js code, with every npm package installed. Sign up to share your code.
Sign Up for Free