Home / JavaScript / Vue.js

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

⚠️ This library is not maintained. Pull-requests and issues are not monitored. Alternatives to text-mask include: https://github.com/uNmAnNeR/imaskjs If you know other alternatives that should be listed here, email
Information
Category: JavaScript / Vue.js
Watchers: 96
Star: 8.2k
Fork: 899
Last update: Dec 9, 2023
Resource links
https://text-mask.github.io/text-mask/
https://github.com/text-mask/text-mask

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!

334 Open More issues
Closed

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 Dec 3, 2016 by ihadeed 56
Closed

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 Dec 14, 2016 by superkew 50
Closed

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 Jul 22, 2016 by AndersonDev 46
Closed

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 Oct 1, 2016 by jafaripur 42
Closed

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 Nov 22, 2016 by simb 35
Closed

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 Jul 27, 2016 by andyrue 34
Open

Bug Angular 14 and Capacitor

Working with Angular 14 and Capacitor, when "37" is entered into an input field with validation for Amex, automatically, the cursor moves to the end of the input.

{ type: CreditCardBrand.Amex, patterns: [34, 37], format: /(\d{1,4})(\d{1,6})?(\d{1,5})?/, mask: amexMask, length: [15], cvvLength: [3, 4], luhn: true, srcImage: 'assets/img/amex.png' }

opened Dec 8, 2023 by matiasArt 0
Open

hou to solve this issue in vue?

null

opened Oct 11, 2023 by summer2up 0
Open

Allow any number between 0 to 99999.99

Looking for textmask pattern for any number which can be ranging from 0 to 99999.99.

any inputs: 0, 0.23, 123.2, 1234.7, 12345.71, 1234 These inputs are valid inputs.

Thanks.

opened Sep 22, 2023 by rajeshgundekari 1
Open

Update webpack.buildWebsite.js

null

opened Jul 29, 2023 by RohitPaul0007 0
Open

Update webpack.buildAddons.js

null

opened Jul 29, 2023 by RohitPaul0007 0
Open

How to use mask be like "\([a-zA-Z0-9.\-|\:]{1,}\)"?

I want to use mask for string : "(172.27.173.182:3001|localhost:3001|172.27.131.174|google.com)". The string's length is dynamic.

image

Help me, please! Thanks.

opened Jun 23, 2023 by tanobi92 0

addons-v3.8.0(Jul 30, 2018)

CHANGELOG

#815 createAutoCorrectedDatePipe is aware of days in month #828 Issue #456: Adding min max year to AutoCorrectedDatePipe

vue-v6.1.2(Jul 25, 2018)

CHANGELOG

#799 Use idiomatic Vue event binding to improve/expand event support

react-v5.4.3(Jul 25, 2018)

CHANGELOG

#807 Fix issue #806 #808 Refactor ref as Component's instance function

react-v5.4.2(Jun 14, 2018)

CHANGELOG

#801 Fix deleting "static" chars for react text mask (#230, #483, #778 etc.)

vue-v6.1.1(May 7, 2018)

CHANGELOG

#790 Update babel es2015 to babel-preset-env

vanilla-v5.1.1(May 7, 2018)

CHANGELOG

#790 Update babel es2015 to babel-preset-env

Contents

    poteto Deeply set values on an Ember Object or POJO
    text-mask vue-text-mask - Input mask for React, Angular, Ember, Vue, & plain JavaScript.
    ankurk91 vue-jquery-mask jQuery Mask Pluginvue-jquery-mask - Vue.js v2.x component for jQuery Mask Plugin
    emberjs A data persistence library for Ember.js.
    vuejs-tips Tiny (<2k gzipped) and dependency free mask input for Vue.js
    vuejs-tips vue-the-mask - Tiny (<2k gzipped) and dependency free mask input for Vue.js
    text-mask Input mask for React, Angular, Ember, Vue, & plain JavaScript
    michalsnik Composable components for rendering fake (progressive) content like facebook
    dwickern Chrome DevTools addon for Ember.js
    realadvisor React Input Format & Mask, tiny (≈800b) component to transform any input component into formatted or masked input. Supports number, date, phone, currency, credit card, etc
    NullVoxPopuli Renderless Component for Popper.JS for you to easily make popovers in Ember.JS
    mydea Prerender Ember apps with Puppeteer.
    wirecardBrasil The awesome-mask runs with Vue.js and uses the vanilla-masker to make your form awesome with masks.
    matiastucci vue-input-tag - Vue.js 2.0 Input Tag Component.
    joseluisq vue-input-number - A custom input number component for Vue.js 2.
    lakb248 vue-ip-input - An ip input component for Vue.js 2.x
    yagopv Take HTML Snapshots for your Angular, Ember, Durandal or any JavaScript applications
    Gbuomprisco Tag Input component for Angular
    shekhargulati Spring Boot 2.x Angular 9 Multi-module Maven Starter Project
    raidan00 vue-r-mask - Directive with template similar to javascript regular expression.
    lakb248 vue-ip-input - An ip input implemented by vuejs.
    Share this repo

    Related Repos


    Vue.js
    5
    Powerful rich text editor using Vue.js and Quill. About 🍡@quilljs editor component for @v...
    cg0101 quill-vuejs Quill editor component for Vue. 基于 Quill、适用于 Vue 的富文本编辑器，支持服务端渲染和单页应用。 Preview Example CDN example page Component example page Install NPM
     
    Vue.js
    10
    Generate types for TypeScript Vue components libraries
    Akryum vue-typegen Generate types for your Vue components library! What is does: Scan the source folder for .vue files Generate a corresponding .vue.ts file
     
    Vue.js
    7
    ▲ NEXT.JS - Example project using Next.js with Locomotive Scroll
    BrunoS3D nextjs-with-locomotive-scroll-example 🔺 NEXT.JS - Example project using Next.js with Locomotive Scroll. (experimental) 🚀 Demo 🚀 Getting started The
     
    Vue.js
    305
    A Vue.js UI components lib for TDesign.
    Tencent TDesign 适配桌面端的组件库，适合在 vue 2.x 技术栈项目中使用。 🎉 特性 适配桌面端交互 基于 Vue 2.0 与其他框架实现版本（React/Angular 等） API、UI 保持一致 支持暗黑模式及其他主题定制 支持按需加载 安装 npm i tdesign-vue 基础使用
     
    Vue.js
    6
    🐧A mini-vue-router , you kan learn the principle of vue-router
    sudongyuer mini-vue-router 🧚🏾 A mini-vue-router , you can learn the principle of vue-router 🍉 🍉 🍉 Getting Started npm run install npm run serve Example Pri
     
    Vue.js
    3
    A template repository / quick start to build Azure Static Web Apps with a Node.js function...
    marcduiker Azure Static Web App Template with Node.js API This is a template repository for creating Azure Static Web Apps that comes pre-configured with: Vue.js
     
    Vue.js
    3.1k
    A Vue.js 3.0 UI Toolkit for Web. Build with Javascript
    hug-sun Introduction A Vue.js 3.0 UI Toolkit for Web. Install npm install element3 -S Quick Start import { createApp } from 'vue' import App from './App.vue'
     
    Vue.js
    3.1k
    🌍 基于 Vue 2.x 和高德地图的地图组件
    ElemeFE vue-amap vue-amap是一套基于Vue 2.0和高德地图的地图组件。 安装 npm install -S vue-amap 文档 https://elemefe.github.io/vue-amap 快速上手 引入vue-amap // 引入vue-amap import VueAMa
     
    Vue.js
    7
    A Vue.js UI components lib for TDesign.
    Tencent TDesign 适配桌面端的组件库，适合在 vue 3.x 技术栈项目中使用。 🎉 特性 适配桌面端交互 基于 vue-next 与其他框架（Vue/React/Angular）版本 API、UI 保持一致 支持暗黑模式及其他主题定制 支持按需加载 安装 npm i tdesign-vue-nex
     
    Vue.js
    8
    Check errors in vue and typescript
    JumiRay A vite plugin to detect *.ts ｜ *.vue typescript error this plugin based on fork-ts-checker-webpack-plugin (https://github.com/TypeStrong/fork-ts-check
     
    Vue.js
    3
    A minimal vue admin template with Element UI & axios & iconfont & permission control & lin...
    laoyin A minimal vue admin template with Element UI & axios & iconfont & permission control & lint
     
    Vue.js
    3
    Vue Storefront integration made for Medusa.js
    vuestorefront-community Vue Storefront 2 integration with Medusa.js To learn how to build your integration, see our Integration guide. How to start if you want to try out the
     
    Vue.js
    3
    Formily Ant Design Vue Adaptor(Vue2)
    formilyjs English | 简体中文 Overview The Awesome Components Library with Formily & ant-design-vue. Features 🖼 Designable, You can quickly develop forms at low cos
     
    Vue.js
    7
    A vue component for Dyte client
    ochanje210 vue-dyte A vue component for Dyte client 📖 Release Notes ⚠️ v2.x.x is for Vue 2. Vue 3 is supported with v3.x.x For Vue 3 Install npm i -S vue-dyte
     
    Vue.js
    3
    This is a shopping site via Vue Framework
    softfantasy vue_shop Project setup npm install Compiles and hot-reloads for development npm run serve Compiles and minifies for production npm run build Lints