text-mask / text-mask Goto Github PK

Input mask for React, Angular, Ember, Vue, & plain JavaScript

Home Page: https://text-mask.github.io/text-mask/

License: The Unlicense

JavaScript 91.61% HTML 3.85% CSS 0.15% Shell 0.97% TypeScript 2.50% Vue 0.40% Handlebars 0.20% SCSS 0.33%

angular ember input-mask inputmask react text-formatting vue

text-mask's Introduction

⚠️ This library is not maintained. Pull-requests and issues are not monitored. Below are some alternatives to text-mask (Please note that the alternatives below are not checked or verified by the maintainers of Text Mask):

If you know other alternatives that should be listed here, email me at [email protected].

Text Mask is an input mask library. It can create input masks for phone, date, currency, zip code, percentage, email, and literally anything!

There are convenient wrappers for React, Angular 2, Ember, and Vue.

Live demo

See it in action, check out the demo page.

Installation and usage

Expected to work with...

IE9+, Android, Samsung Internet, Windows Phone, iOS, Opera, Firefox, Safari, and Chrome

Flexible

Text Mask is very configurable and allows you to create any type of input mask with minimal APIs. See the documentation for details.

Extendable

You can easily expand the base functionality of Text Mask with addons for more mask types. Checkout existing addons.

Robust

Text Mask supports pasting, browser auto-fill, and all operations that a user would expect while interacting with an input field.

It works on mobile, has no 3rd party dependencies, and has a tiny footprint (less than 4KB gzipped).

For any questions, suggestions, or feature requests

Please file an issue!

text-mask's People

Contributors

Stargazers

Watchers

Forkers

ckearns1210 atyapin claycarpenter brunohcastro nimbusti flxa sky-coding littlebigjuko nick1247 pavkout davidohalloran g-maan heymdall fouadbhatti kardan26 marufsiddiqui salcad akiran billcolumbia satanworker andyrue g-serghei mhamel06 fengweijp bradparks zxshinxz sethguy logvinoleg89 kostya-gil fanyer itsjason txd159 mzedeler priestd09 genna tairezzzz brunoosilva nabausch chiu-kevin-bah gxerxes moonlight-dev pobedite mobilestar2015 ihadeed ajax-ua phieudu241 gittz angular-projects-v-1-to-x shemi lucaswdeveloper ipassynk canaanjin lozjackson simb neverland chomnanp ignovak brandensilva newshagithub badoque lingtal-fork nathanbellette afrianjunior wilsondebug probil barbershop heygambo josemarluedke diegolma mike1pol freewil rishimukherjee andrea-spotsoftware mirlabraga starniciuc foneclay jasongerbes peterlin0625 shuhkla ashlesha86 larriereguichet mhazy maroy1986 rodrigonunz bmenegidio 80sguy christophercr suuuuuuuuperman nikches howellmartinez licheninc akhramov zetoke stevard6949 mathieu-neron spec007 feidianbo worhols forever4313 prudhvinaidu

text-mask's Issues

change guide

How can i change the guide to flase in angular2?

Allow to use the mask with other input types

The only type that works is text.
Specially on mobile, it'd be nice to set the type of the input in order to show the correct keyboard.

unable to use 2 way data binding

hi,

i know 2 way data binding is not a great idea but still your plugin does not work with it - angulars change detections is always one action behind real value.

ill provide a plunker in few hours

Pick a name?

I know it's nice having an umbrella but it is a bit weird doing @msafi/ for the npm install. I am unsure how npm handles redirects but you could deprecate it in favor of name packages?

I grabbed placeholders just in case.
https://www.npmjs.com/package/vanilla-text-mask
https://www.npmjs.com/package/angular-text-mask
https://www.npmjs.com/package/react-text-mask

Not sure the naming scheme you wanted. {library}-text-mask or text-mask-{library}

Can't find module in angular 2

I run "npm i angular2-text-mask --save" and call the module, but the angular can't find him. I looked the code and the core paste isn't in the "node_modules/angular2-text-mask". Did you already see this?

Error: No provider for NgModel!

I get the following error when using [textMask] on an input:

ORIGINAL EXCEPTION: No provider for NgModel!

My input:

  <input type="tel"
            class="form-control"
            ngControl="secondaryPhone"
            id="subjectsecondaryPhone"
            placeholder="(999) 999-9999"
            [textMask]="{mask: '(111) 111 1111'}"
            [(ngModel)]="subject.secondaryPhone"
            #secondaryPhone="ngForm"">

My component:

import { Component, OnInit } from '@angular/core';
import { FormBuilder, Validators, ControlGroup } from '@angular/common';
import { Router } from '@angular/router';

import { Subject, SubjectService } from '../shared';

import MaskedInput from 'angular2-text-mask'

@Component({
  moduleId: module.id,
  templateUrl: 'subject-detail.component.html',
  styleUrls: ['subject-detail.component.css'],
  directives: [MaskedInput],
  providers: [ValidatorsService]
})
export class SubjectDetailComponent implements OnInit {
  subject: Subject;
  subjectDetailsForm: ControlGroup;


  constructor(
    private _subject: SubjectService,
    private _fb: FormBuilder,
    private _validate: ValidatorsService
  ) { }

  ngOnInit() {

    // Subject details form
    this.subjectDetailsForm = this._fb.group({
      name: ['', Validators.required],
      dob: ['', Validators.compose([
        Validators.required,
        this._validate.date
      ])],
      gender: ['', Validators.required],
      race: ['', Validators.required],
      address: ['', Validators.required],
      primaryPhone: ['', Validators.required],
      secondaryPhone: ['']
    });
  }

}

Create a test suite for high-level behavior

A test suite for UI components to be tested againt to verify that they are working properly

Make email mask addon

A mask function that formats input as email is possible to write. As a convenience to users, I'll write one and publish it as addon.

Make hooking up with jQuery easy

Cannot call method 'update' of undefined

I'm getting the following error in my production server using the React component:

TypeError: Uncaught TypeError: Cannot call method 'update' of undefined

Stack trace is not very useful other than:
webpack:///./~/react-text-mask/dist/reactTextMask.js:1t.MaskedInput.o.default.createClass.componentDidUpdate

I'm still investigating will update with my findings.

Angular 2: No provider for NgControl

I am running the plugin as per demo, with the only apparent difference being my bootstrap code:

bootstrap(AppComponent, [
  disableDeprecatedForms(),
  provideForms(),
]);

And I get exception No provider for NgControl. Does the Angular 2 plugin only support deprecated forms?

error npm install continue

I tried, but im receiving the follow error:

#58

C:\dev\angular\text-mask>npm install
npm ERR! Windows_NT 10.0.10586
npm ERR! argv "C:\dev\nodejs\node.exe" "C:\dev\nodejs\node_modules\npm\bin\npm-cli.js" "install"
npm ERR! node v4.4.6
npm ERR! npm v2.15.5
npm ERR! code EPEERINVALID

npm ERR! peerinvalid The package [email protected] does not satisfy its siblings' peerDependencies requirements!
npm ERR! peerinvalid Peer @angular/[email protected] wants [email protected]
npm ERR! peerinvalid Peer @angular/[email protected] wants [email protected]

npm ERR! Please include the following file with any support request:
npm ERR! C:\dev\angular\text-mask\npm-debug.log

not running in RC1

I was trying to bring this to work with Angular2 RC1, but renaming of all the dependencies fom angular2/ to @angular/ seems not to be enough.
The import path is not recognized. I tryed to import {MaskedInputDirective} from '@msafi/angular2-text-mask/src/angular2TextMask';
but next problem was here: Cannot resolve 'file' or 'directory' ../../core/src/index
Do I have to install something else? Your doc only tells from "npm i @msafi/angular2-text-mask --save"

Select all, add value defaults to cursor position 0

Mask: 1111
User selects all
User presses 3

Cursor position will be moved back to 0 instead of position 1.
Only tested in React at the moment, I'll have a look at this later if I get a second before I leave.

How to get the value without the mask characters?

As I think ngModel should be without symbols (-,() ect.). Like: (083) 22-2222 in mask and 083222222 in model.

Achieve feature parity with https://github.com/RobinHerbots/jquery.inputmask

Support elastic pattern areas

Remove React peer dep

It'd be great to remove the peer dependency on react since it doesn't really matter, or at least set it up to work with latest v15.

Project looks great though, been having android issues with masking, so glad this is being tackled in this project.

Angular 2 - Mask not working

ORIGINAL EXCEPTION: No provider for NgControl!

When i put " ngControl " in the component to the provider this error pops up:

EXCEPTION: TypeError: this.ngControl.viewToModelUpdate is not a function

Any solution for this?

Add ESLint

How to set input model value from angular 2 component with mask?

constructor: function() {
this.mask = '(111) 111 1111'
this.myModel = '222222222'
}

text-mask does not validate partial pattern when submit form

Hi guys, it is not a issue,I am sory. I am just trying to get some help about textMask validation. Cause I could not use to invalidate the form. Thanks in advanced.

html
[textMask]="{mask: mask, validator: mmddyyyyValidator}"
@component(...)
export class Form {
....
mmddyyyyValidator = createMmddyyyyValidator({
minimumDate: '01/01/1900',
maximumDate: '12/31/2016'
});
.....
}

function createMmddyyyyValidator({minimumDate = '', maximumDate = ''} = {}) {
return function(conformedUserInput) {
return false;
}
}

Create a more convenient higher order component for React

Angular 2 component does not mask initial value

This is my field:

When I populate the "input" in ngModel. The page load without mask. But when i change it or add a caracter the mask works again.

Using SystemJS with systemjs.config.js

Do you have some example for load using SystemJs with systemjs.config.js file?
I try configure but it don`t work.

Defining an onBlur causes extra character

In React defining an onBlur is causing something weird to happen.
My mask mask="111-111-1111"
Resulting value with an onBlur can cause this result.
"111-111-11113"

                        <MaskedInput
                          type="text"
                          className="form-control"
                          id="input-contact-phone"
                          placeholder="555-555-5555"
                          onBlur={() => onBlur("primaryPhoneNumber")}
                          mask="111-111-1111"
                          value={this.props.application.business.primaryPhoneNumber}
                          onChange={this.sendToRedux}
                        />

No issues with onBlur not set

                        <MaskedInput
                          type="text"
                          className="form-control"
                          id="input-contact-phone"
                          placeholder="555-555-5555"
                          mask="111-111-1111"
                          value={this.props.application.business.primaryPhoneNumber}
                          onChange={this.sendToRedux}
                        />

Consider switch to Uncontrollable

This is something I can tackle, just setting a placeholder issue.

Consider switching to using https://github.com/jquense/uncontrollable for the React portion. This would allow us to have an uncontrolled (value etc existing on internal state), as well as having a controlled input (user controlled what value is).

Just will make the component more flexible

Block unaccepted characters from input

If passed a number instead of string will throw

If passed a number instead of a string split is called and will cause an error to be thrown.
May only be an issue with React.

Not sure if we should always coerce to strings? It's handleable in user land so not pressing for a fast fix, curious of what you think should be done.

error npm install

Hello, im trying to install your component, but i have the following error:

npm ERR! peerinvalid The package rxjs does not satisfy its siblings' peerDependencies requirements!
npm ERR! peerinvalid Peer @angular/[email protected] wants [email protected]
npm ERR! peerinvalid Peer @angular/[email protected] wants [email protected]

Tks
George

React can't have empty placeholder

If you define an empty placeholder placeholder="" the component doesn't allow for this and will just render the placeholder it constructs.

To-dos

Make components for:

Bug resolve in angular 2 (Input is populated)

The input populated bug is resolved, but i can't push my modifications "Permission denied":

The change was this: angular2TextMask.ts

ngOnInit() {
const {placeholderChar} = this.textMaskConfig

this.control = createTextMaskInputElement(Object.assign({
  inputElement: this.inputElement,
  placeholderChar,
}, this.textMaskConfig))

**this.control.update()**

}

Someone can publish this alteration or verify it?

Character count wildcard (eg price mask)

I can't find in the docs and examples, so I'm assuming this is not implemented.

I'm consuming price value in integer cents, that I need to display as decimal. For example, I have a 15000 value that has to be displayed as 150.00. That is easy to do in a read-only situation, but I need to mask this in a input. Is it possible to do something like {mask: '1+.11'},{mask: '1*.11'} or similar?

Remove dependency on jsdiff

Angular 2 validators do not work

On first type I have:
RIGINAL EXCEPTION: TypeError: this.ngControl.viewToModelUpdate is not a function
And ngModel do not changing

And what about form.valid?

Fix test case in adjustCaretPosition

Unwanted extra character

I'm not sure if this is a bug or I'm doing something wrong.

Using angular2 rc.4, angular2-text-mask 0.15.

Masking like this.
<input [textMask]="{mask: '11/11/1111'}" type="text" formControlName="dob" required>

The mask displayed in the form is correct _ _ / _ _ / _ _ _ _ but If I enter a date like 01/12/1992 there is always an extra _ saved at the end in the background, 01/12/1992_. If I enter 01/12/19923, I don't actually see the last 3 get typed into the input but it saves it as 01/12/19923. Anything beyond that though it doesn't take. Thanks for looking!

Ionic v2 compatibility

Is it possible to host the mask directive with a custom input component? Like <ion-input> from Ionic Framework

Angular 2 Import

Hi. Can't import module because ts can not find module. Packege was instaled by npm.

Thanks!

Allow a masking character to be used as part of the pattern

Make hooking up to a vanilla DOM element easy

Does not work with Model Driven Forms (FormBuilder)

I have downloaded the new package and tried to import as so:
import MaskedInput from 'angular2-text-mask'
but I am getting cannot find module 'angular2-text-mask' error.

[Webpack] Can't install in Angular2 RC4

Hi,

I'm trying to install your module but I've the following error:
`npm ERR! node v4.4.5
npm ERR! npm v2.15.5
npm ERR! code EPEERINVALID

npm ERR! peerinvalid The package [email protected] does not satisfy its siblings' peerDependencies requirements!
npm ERR! peerinvalid Peer @msafi/[email protected] wants angular2@*`

Do you have any idea why it's complaining about angular2?
In my package.json, Angular is defined like this:
"@angular/common": "2.0.0-rc.4", "@angular/compiler": "2.0.0-rc.4", "@angular/core": "2.0.0-rc.4", "@angular/forms": "0.2.0", "@angular/http": "2.0.0-rc.4", "@angular/platform-browser": "2.0.0-rc.4", "@angular/platform-browser-dynamic": "2.0.0-rc.4", "@angular/router": "3.0.0-beta.2"

Thanks in advance.

Benjamin

How to reproduce / actual

Open https://msafi.github.io/text-mask
Enter the mask: "(111) 111-1111" (without quotes). In the masked input you will see "(__) -"
Focus on "Masked input" and try to press "(".
Nothing happens, "(" is not appended to input.

Expected

When you presses "(", it is appended to input and you will able to enter the next character.

What do you think?

npm i angular2-text-mask --save

Gives me the following error:
corp-segurado@ C:\Projetos\corp-segurado\app
+-- UNMET PEER DEPENDENCY angular2@*
+-- [email protected]
`-- [email protected] extraneous

Why is this happening and how could I solve this?