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

Overview

Text Mask

⚠️ This library is not maintained. Pull-requests and issues are not monitored. Alternatives to text-mask include:

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


Build Status

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!

Issues
  • Input takes additional character that appears only in the model

    Input takes additional character that appears only in the model

    This issue possibly only occurs with Angular 2, I haven't tested with Vanilla JS.

    The mask displays the number of characters correctly, but if you fill all the characters and then add one more, the model will register it even though the mask doesn't show that character. You can only add one additional character, and it's usually the last character you type.

    So lets say our mask takes 4 digit number, and I enter 1234. If I type 5 the model will be 12345 and then if I type in any other character (without deleting that invisible 5) it will replace the 5. So if I type in 123456789 the model will read 12349.

    Also, even if we don't type in that extra character, the model will read the following 1234_

    Plunker to test this issue: http://plnkr.co/edit/rYKjK1oQclW2vOFnfIwQ?p=preview

    The Credit card number field has a mask attached to it. Fill in any numbers then press Save. Pressing the Save button will console log the model.

    bug angular2 i don't know how to fix it ionic 
    opened by ihadeed 56
  • Caret position incorrect on android device

    Caret position incorrect on android device

    Initially discovered when compiling for ionic but is apparent on the default browser on an android device. The caret moves incorrectly when passing over mask characters eg. (or ) in the phone number mask.

    To reproduce use the sample website https://text-mask.github.io/text-mask/ and enter numbers for the phone number. Works fine on computer browser and ios.

    help wanted 
    opened by superkew 50
  • How to get the value without the mask characters?

    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.

    faq 
    opened by AndersonDev 46
  • Error on new Ionic2 RC0 with AoT compiler

    Error on new Ionic2 RC0 with AoT compiler

    After upgrading ionic2 to RC0 and using AoT compiler this error occurred in build time:

    ngc error: Error: can't find symbol undefined exported from module /home/araz/Desktop/bluedot/node_modules/angular2-text-mask/dist/angular2TextMask.d.ts, resolving symbol AppModule in /home/test/.tmp/app/app.module.ts, resolving symbol AppModule in /home/test/.tmp/app/app.module.ts
    
    bug angular2 i don't know how to fix it 
    opened by jafaripur 42
  • Initial formatted value not set to model

    Initial formatted value not set to model

    Perhaps I am misunderstanding the point of how this component works. So let me explain my scenario and see if I can get on the right path.

    I am using angular 2, and we are using the text-mask component to format dates, SSN and phone numbers.

    Much of the data in the system is not formatted correctly, hence the need for this library.

    When I supply a SSN mask that should like like "333-22-4444" a value of "3332224444" the component does a great job of displaying it with the format as requested. The problem is that the underlying value that the component is bound to does not get changed when the component changes the original value to the formatted value. So despite the user seeing that the value is formatted correctly the validation sees it as the original value.

    I believe that when the component gets to the end of the update it should fire an event to tell the component to update its value.

    In angular 2 terms, I think the variable bound into this control my ngModel should be updated to whatever is displayed in the control.

    My validator is checking that the underlying data is of the correct format. And the user sees that the value is in the correct format. But the "value" of the control is the unformatted text.

    The only way for the user to fix this is to delete the last character in the input and type it again. Now the input looks exactly as it did before but now the value has been updated and my validation can pass.

    bug angular2 i don't know how to fix it 
    opened by simb 35
  • Unwanted extra character

    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!

    angular2 
    opened by andyrue 34
  • Clear values

    Clear values

    Hello!

    I found the weird row in source code at update method: rawValue = rawValue || inputElement.value

    In my case, I use React component and outside Store, that controlling my state of form (inputs with react-text-mask). I have method .clear, that set all fields to ''. But it doesn't work, obviously.

    So, how I can clear values from outside state controller?

    bug react core 
    opened by zetoke 33
  • Added support for Vue 2.0

    Added support for Vue 2.0

    This update adds support for Vue 2.0.

    • Support for Vue 1.x dropped, use v0.2 if required.
    • Vue instance attached to #app element as cannot be attached to body.
    • It uses a Vue component instead of a directive.
    • Support for v-model. Changes to the input will emit an 'input' event that ensures 2-way binding when v-model is used.

    Thanks to @billcolumbia and @pinguinjkeke for helping with this.

    opened by jasongerbes 30
  • Make React Component work With Snapshots

    Make React Component work With Snapshots

    Component currently breaks if you attempt to snapshot. This is something I can tackle.

    react 
    opened by browniefed 27
  • Console warning

    Console warning "Failed prop type: React.PropTypes type checking code is stripped in production." when using react-text-mask

    When using react-text-mask, MaskedInput produces the following warning in the browser's console:

    bildschirmfoto 2017-04-21 um 12 22 51

    My codebase is in TypeScript, here is how I use MaskedInput right now:

    import * as React from 'react'
    const MaskedInput = require('react-text-mask').default
    
    export const Test = () => (
      <MaskedInput
        mask={[/\d/, /\d/, '.', /\d/]}
      />
    )
    
    bug react 
    opened by philipstanislaus 26
  • Add a country code (+)

    Add a country code (+)

    Please tell me how to add a country code, so that before entering the +7 That +7 would always be visible

    That didn't help. - https://github.com/text-mask/text-mask/issues/689

    opened by thefubon 0
  • Could not resolve dependency: react

    Could not resolve dependency: react

    npm ERR! Found: [email protected]
    npm ERR! node_modules/react
    npm ERR!   [email protected]"^17.0.1" from the root project
    npm ERR!
    npm ERR! Could not resolve dependency:
    npm ERR! peer [email protected]"^0.14.0 || ^15.0.0 || ^16.0.0" from [email protected]
    npm ERR! node_modules/react-text-mask
    npm ERR!   [email protected]"5.4.3" from the root project
    npm ERR!
    npm ERR! Fix the upstream dependency conflict, or retry
    npm ERR! this command with --force, or --legacy-peer-deps
    npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
    

    https://github.com/text-mask/text-mask/blob/master/react/package.json#L17

    opened by simonguo 2
  • keepCharPositions does not work if the value is auto-populated (from an api, date-picker, etc.)

    keepCharPositions does not work if the value is auto-populated (from an api, date-picker, etc.)

    If the user populates a react-text-mask input field from a date picker or it auto-populates from an api, keepCharPositions does not work correctly.

    Here's code sandbox where you can see the issue: https://codesandbox.io/s/determined-saha-mmdxb?file=/src/App.js

    Is there a way to get it to work after the page loads and then the value is auto-populated?

    opened by derrick-p 0
  • Discard invalid input props

    Discard invalid input props

    (I was originally gonna post this on Material-UI, but realized this library is the cause)

    Passing a custom component using MaskedInput to MUI's TextField's inputProps property seems to be passed all the way to the actual <input> element, which causes this error to appear in the console: index.js:1 Warning: React does not recognize the `inputComponent` prop on a DOM element. If you intentionally want it to appear in the DOM as a custom attribute, spell it as lowercase `inputcomponent` instead. If you accidentally passed it from a parent component, remove it from the DOM element.

    • [x] The issue is present in the latest release. (^5.4.7)
    • [x] I have searched the issues of this repository and believe that this is not a duplicate.

    Current Behavior 😯

    image

    Expected Behavior 🤔

    No errors as-is with Material-UI/text-mask, without having to resort to a workarounds such as { inputProps, ...props }: CustomProps. inputProps is specifically an issue here as it's used with MUI, but I believe the true solution is to discard all invalid input properties.

    Steps to Reproduce 🕹

    Use a MaskedInput with some inputProps

    https://codesandbox.io/s/delicate-meadow-2j75c https://github.com/Avasam/speedrun.com_global_scoreboard_webapp/blob/develop/tournament-scheduler/src/Components/ScheduleManagement/ScheduleWizard/NonZeroNumberInput.tsx

    opened by Avasam 0
  • Update lastValue whenever ngModel property update programmatically

    Update lastValue whenever ngModel property update programmatically

    Scenario:

    • We have two textbox bind with ngModel properties respectively and (ngModelChange) event bind to these.

    • On change in first textbox value need to update second textbox ngModel property which is reflecting. (when you have update ngModel property programmatically then it trigger writeValue function but not update the lastValue hence then you change the ngModel value and its not triggered this._onChange();).

    • But After programmatically update value, when remove the value from second textbox (ngModelChange) will not trigger because this.lastValue has not been updated in previous writeValue function.

    Issue Produced StackBlitz Please have a look and follow the steps to produce it.

    opened by Atifarooq 1
  • Update reactTextMask.js

    Update reactTextMask.js

    mask cant be true

    alternative pull-request to @types/react-text-mask: https://github.com/DefinitelyTyped/DefinitelyTyped/pull/53730

    playground: https://codesandbox.io/s/falling-sun-xdthu?file=/src/App.js

    opened by kvrvgixzis 0
  • No mask when paste phone with suggestions in Chrome at iOS

    No mask when paste phone with suggestions in Chrome at iOS

    No mask when paste phone with suggestions in Chrome at iOS (same issue as with react-number-format: https://github.com/s-yadav/react-number-format/issues/547)

    Steps to reproduce:

    Open chrome://settings/addresses and add some phone for suggestions Open example in Chrome: https://xl9mu.csb.app/ Use Chrome suggestions instead of standard keyboard input Example code: https://codesandbox.io/s/delicate-rain-xl9mu?file=/src/index.js

    react-text-mask: 5.4.3 Chrome: 90.0.4430.216 iOS: 14.5.1

    https://user-images.githubusercontent.com/7009699/120219615-2ccb0780-c244-11eb-8f94-1ba53e5998c4.MP4

    opened by someden 1
  • Bump lodash from 4.17.5 to 4.17.21

    Bump lodash from 4.17.5 to 4.17.21

    Bumps lodash from 4.17.5 to 4.17.21.

    Commits
    • f299b52 Bump to v4.17.21
    • c4847eb Improve performance of toNumber, trim and trimEnd on large input strings
    • 3469357 Prevent command injection through _.template's variable option
    • ded9bc6 Bump to v4.17.20.
    • 63150ef Documentation fixes.
    • 00f0f62 test.js: Remove trailing comma.
    • 846e434 Temporarily use a custom fork of lodash-cli.
    • 5d046f3 Re-enable Travis tests on 4.17 branch.
    • aa816b3 Remove /npm-package.
    • d7fbc52 Bump to v4.17.19
    • Additional commits viewable in compare view
    Maintainer changes

    This version was pushed to npm by bnjmnt4n, a new releaser for lodash since your current version.


    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    dependencies 
    opened by dependabot[bot] 0
  • Update peer dependencies for react-text-mask to include React 17

    Update peer dependencies for react-text-mask to include React 17

    Fixes https://github.com/text-mask/text-mask/issues/1032

    opened by samheutmaker 5
Releases(addons-v3.8.0)
Input masking component for React. Made with attention to UX.

react-input-mask Input masking component for React. Made with attention to UX. This is a development branch for version 3.0. For the latest stable ver

Nikita Lobachev 1.8k Oct 9, 2021
Masked input React component

MaskedInput A React component for input masking, built on top of inputmask-core. Live Demo Install npm npm install react-maskedinput --save Browser

Jonny Buchanan 713 Oct 7, 2021
Cleave.js has a simple purpose: to help you format input text content automatically.

Cleave.js Cleave.js has a simple purpose: to help you format input text content automatically. Features Credit card number formatting Phone number for

Max Huang 17k Oct 19, 2021
A ReactJS component that allows for multiple text field input, built using the FluentUI library

A ReactJS component that allows for multiple text field input, built using the FluentUI library

Boia Alexandru 1 Sep 22, 2021
A React Hook & Container to help with payment card input fields.

React Payment Inputs A React Hook & Container to help with payment card input fields. React Payment Inputs Demos Requirements Installation Usage With

medipass 249 Oct 14, 2021
React component for entering and validating PIN code.

React component for entering and validating PIN code.

Konstantin Kulinicenko 233 Sep 3, 2021
Highly configurable & extensible automatically sized input field built with hooks.

Highly configurable & extensible automatically sized input field built with hooks.

Kierien Lee 4 Sep 23, 2021
A numpad for number, date and time, built with and for React.

React numpad A numpad for number, date and time, built with and for React. It's written with the extensibility in mind. The idea of this project is to

Pietro Ghezzi 123 Oct 4, 2021
Beautiful credit cards for your payment forms

React Credit Cards A slick credit card component for React. Demo Install npm install --save react-credit-cards Usage import React from 'react'; impor

AMARO 2.2k Oct 6, 2021