Tiny (2k gzipped) and dependency free mask input for Vue.js

Overview

The Mask

A lightweight (2KB gzipped) and dependency free mask input created specific for Vue.js

Docs and Demo

JsFiddle

The Mask Heart

Install

yarn add vue-the-mask
or
npm i -S vue-the-mask

Usage (two flavors)

Global

import VueTheMask from 'vue-the-mask'
Vue.use(VueTheMask)

Local (inside the component)

import {TheMask} from 'vue-the-mask'
export default {
  components: {TheMask}
}

Local (as directive)

import {mask} from 'vue-the-mask'
export default {
  directives: {mask}
}

Tokens

'#': {pattern: /\d/},
'X': {pattern: /[0-9a-zA-Z]/},
'S': {pattern: /[a-zA-Z]/},
'A': {pattern: /[a-zA-Z]/, transform: v => v.toLocaleUpperCase()},
'a': {pattern: /[a-zA-Z]/, transform: v => v.toLocaleLowerCase()},
'!': {escape: true}

The Mask Money

Properties

Property Required Type Default Description
value false String Input value or v-model
mask true String, Array Mask pattern
masked false Boolean false emit value with mask chars, default is raw
placeholder false String Same as html input
type false String 'text' Input type (email, tel, number, ...)
tokens false Object tokens Custom tokens for mask

What about money?

We understand that money format is a totally different domain, which needs another specific component. You can use https://github.com/vuejs-tips/v-money

The Mask Money

Other Solutions

  1. https://github.com/nosir/cleave.js https://github.com/nosir/cleave.js
  2. https://github.com/text-mask/text-mask https://github.com/text-mask/text-mask
  3. https://github.com/igorescobar/jQuery-Mask-Plugin https://github.com/igorescobar/jQuery-Mask-Plugin
  4. https://github.com/fernandofleury/vanilla-masker https://github.com/fernandofleury/vanilla-masker
  5. https://github.com/angular-ui/ui-mask https://github.com/angular-ui/ui-mask
  6. https://github.com/insin/inputmask-core https://github.com/insin/inputmask-core
  7. https://github.com/niksmr/vue-masked-input https://github.com/niksmr/vue-masked-input
  8. https://github.com/probil/v-mask https://github.com/probil/v-mask
  9. https://github.com/moip/awesome-mask https://github.com/moip/awesome-mask
  10. https://github.com/the-darc/string-mask https://github.com/the-darc/string-mask
  11. https://github.com/romulobrasil/PureMask.js https://github.com/romulobrasil/PureMask.js
  12. https://github.com/devindex/vue-mask https://github.com/devindex/vue-mask

Currency

  1. https://github.com/vuejs-tips/v-money https://github.com/vuejs-tips/v-money
  2. https://github.com/plentz/jquery-maskmoney https://github.com/plentz/jquery-maskmoney
  3. https://github.com/flaviosilveira/Jquery-Price-Format https://github.com/flaviosilveira/Jquery-Price-Format
  4. https://github.com/kevinongko/vue-numeric https://github.com/kevinongko/vue-numeric

Suggest another one here

Contribution

You're free to contribute to this project by submitting issues and/or pull requests. This project is test-driven, so keep in mind that every change and new feature should be covered by tests. Your name will be added to the hall of fame ;)

The Mask Wolf

License

This project is licensed under MIT License

Comments
  • the cursor jump to end position when edit the front of typed text

    the cursor jump to end position when edit the front of typed text

    my code:

    //html
          <the-mask v-model="form.mac" type="text" mask="FF:FF:FF:FF:FF:FF" :tokens="hexTokens" class="el-input__inner" placeholder="仅支持16进制字符"></the-mask>
    
    //js
          hexTokens: {
            F: {
              pattern: /[0-9a-fA-F]/,
              transform: v => v.toLocaleUpperCase()
            }
          },
    

    I input 'AA:AA:AA:AA:AA:AA' ,it's ok, i want to change it to 'AA:BB:AA:AA:AA:AA' i move the cursor, delete the second AA, and input a B, then the cursor jump to the end i can not input 2 BB continuously。

    opened by leecz 16
  • Problema com máscara de telefone

    Problema com máscara de telefone

    Olá,

    Estou utilizando o exemplo:

    <input v-mask='["(##)####-####", "(##)#####-####"]' v-model="fieldValue" type="text" :name="name" />

    Ao carregar o campo em branco o componente acaba preenchendo com o início da máscara: "("

    No caso, carrego vazio mas o value fica: "("

    Podem me ajudar?

    opened by nogueiraever 13
  • Mascara input celular

    Mascara input celular

    Ola, estou tendo um problema ao usar a mascara no celular.

    Estou usando o seguinte codigo <the-mask mask="AAA-####" v-model="placa" placeholder="AAA-0000"></the-mask>

    No computador funciona perfeitamente, porem quando testo no celular acontece um problema.

    Quando vou digitar o primeiro numero da placa o caret fica antes do numero.

    Assim: ABC-|1

    Isso acaba sendo um problema de usabilidade porq o usuario vai digitar direto e a placa fica errada

    bug 
    opened by hermogenes-ciandt 12
  • Vuex Warning

    Vuex Warning

    Hi! I'm getting this warning when I import the component into my project:

    [Vue warn]: Error in callback for watcher "function () { return this._data.$$state }": "Error: [vuex] Do not mutate vuex store state outside mutation handlers."

    opened by luismiguelprs 9
  • Raw output is not working

    Raw output is not working

    I want to output raw data, like in example, but this is not working

    <input v-model="phone" masked="false" v-mask="'+38 (0##) ###-##-##'" placeholder="+38 (0××) ×××-××-××"/>
    
    opened by hackuun 4
  • Include src with package

    Include src with package

    When you publish the package to npm, you should include src folder.

    Benefits

    • One can go and check the implementation within node_modules
    • Easy to debug
    • Custom build
    enhancement 
    opened by ankurk91 4
  • Mask breaks on mobile

    Mask breaks on mobile

    Chrome mobile seems to break some behavior when setting the cursor.

    With mask AAA-####, when you start typing the letters and will type the first number, the cursor is here ( | ): ABC-|6, where it should be here: ABC-6|.

    Tested on latest Chrome mobile @ Android 7

    duplicate 
    opened by vjoao 4
  • No documentation about using functions in mask property

    No documentation about using functions in mask property

    I was trying to use a function in the mask property but the documentation don't explain the correct way to do it, so the result it is not the expected. Would be great improvement to documentation specify as to use functions in mask property.

    opened by maxalmonte14 4
  • v-mask directive array not working on v0.11.0-alpha.1

    v-mask directive array not working on v0.11.0-alpha.1

    I'm trying to use the following, but it's not working:

    <input type="text" name="phone" v-mask="['(##) ####-####', '(##) #####-####']" placeholder="{{ trans('front.phone') }}" />
    

    I need to use the directive way because of the validator, but this v-mask array is just working on v0.10 that doesn't support the directive component.

    opened by lucassimines 4
  • Problema ao inicializar / Failed to mount component

    Problema ao inicializar / Failed to mount component

    Olá pessoal,

    Gostei muito do componente, é o que eu estava procurando, Mas estou com problemas pra usá-lo. Fiz o seguinte:

    Baixei o pacote das duas formas: npm i -S vue-the-mask npm install vue-the-mask --save-dev

    Na minha página/componente Vue:

    <the-mask
    	:type="'text'" ref="input"
    	:mask="['###.###.###-##', '##.###.###/####-##']"
    	placeholder="CPF / CNPJ">
    </the-mask>
    
    <script>
    import TheMask from 'vue-the-mask';
    
    export default {
    	components: { TheMask },
    	data() {
    	...
    

    Mas aparece o seguinte erro no console:

    [Vue warn]: Failed to mount component: template or render function not defined. (found in )

    Estou fazendo algo de errado? Testei no JsFiddle e funcionou certinho, mas na minha aplicação tenho o tal erro. Estranho, pois tenho alguns componentes que criei e funcionam perfeitamente.

    Outra dúvida que tenho é: ele suporta outros atributos do input, como id, class, autocomplete para serem setados por v-bind?

    Agradeço.

    opened by evandroabukamel 4
  • Mask phone number 06 and +33

    Mask phone number 06 and +33

    Hello, I'm using Vuetify who use vue-the-mask. I'd like to manager 2 types of phone number. The user can type 06 78 94 56 20 and he can type +33 6 78 94 56 20. I tried this pattern : ['## ## ## ## ##', '+33 # ## ## ## ##'] but it doesn't work. When I start to type 06 78 94 56 the mask automatically change to +33 0 67 89 45 6. Even if I type the full number 06 78 94 56 20 I'll get +33 0 67 89 45 62

    What I need is :

    • if I start typing 06 78 94 56, I don't want the +33
    • if I start typing +33 6 78 94 56 20 I don't want the 06 and when I type 0 I want transform this 0 in +33

    I'd like to get the same behavior as phone mask of cleave.js

    What can I do to do that ?

    opened by JonathanVandal 3
  • Bump moment from 2.22.1 to 2.29.4

    Bump moment from 2.22.1 to 2.29.4

    Bumps moment from 2.22.1 to 2.29.4.

    Changelog

    Sourced from moment's changelog.

    2.29.4

    • Release Jul 6, 2022
      • #6015 [bugfix] Fix ReDoS in preprocessRFC2822 regex

    2.29.3 Full changelog

    • Release Apr 17, 2022
      • #5995 [bugfix] Remove const usage
      • #5990 misc: fix advisory link

    2.29.2 See full changelog

    • Release Apr 3 2022

    Address https://github.com/moment/moment/security/advisories/GHSA-8hfj-j24r-96c4

    2.29.1 See full changelog

    • Release Oct 6, 2020

    Updated deprecation message, bugfix in hi locale

    2.29.0 See full changelog

    • Release Sept 22, 2020

    New locales (es-mx, bn-bd). Minor bugfixes and locale improvements. More tests. Moment is in maintenance mode. Read more at this link: https://momentjs.com/docs/#/-project-status/

    2.28.0 See full changelog

    • Release Sept 13, 2020

    Fix bug where .format() modifies original instance, and locale updates

    2.27.0 See full changelog

    • Release June 18, 2020

    Added Turkmen locale, other locale improvements, slight TypeScript fixes

    2.26.0 See full changelog

    • Release May 19, 2020

    ... (truncated)

    Commits

    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
  • Bump shell-quote from 1.6.1 to 1.7.3

    Bump shell-quote from 1.6.1 to 1.7.3

    Bumps shell-quote from 1.6.1 to 1.7.3.

    Release notes

    Sourced from shell-quote's releases.

    v1.7.2

    • Fix a regression introduced in 1.6.3. This reverts the Windows path quoting fix. (144e1c2)

    v1.7.1

    • Fix $ being removed when not part of an environment variable name. (@​Adman in #32)

    v1.7.0

    • Add support for parsing >> and >& redirection operators. (@​forivall in #16)
    • Add support for parsing <( process substitution operator. (@​cuonglm in #15)

    v1.6.3

    • Fix Windows path quoting problems. (@​dy in #34)

    v1.6.2

    • Remove dependencies in favour of native methods. (@​zertosh in #21)
    Changelog

    Sourced from shell-quote's changelog.

    1.7.3

    • Fix a security issue where the regex for windows drive letters allowed some shell meta-characters to escape the quoting rules. (CVE-2021-42740)

    1.7.2

    • Fix a regression introduced in 1.6.3. This reverts the Windows path quoting fix. (144e1c2)

    1.7.1

    • Fix $ being removed when not part of an environment variable name. (@​Adman in #32)

    1.7.0

    • Add support for parsing >> and >& redirection operators. (@​forivall in #16)
    • Add support for parsing <( process substitution operator. (@​cuonglm in #15)

    1.6.3

    • Fix Windows path quoting problems. (@​dy in #34)

    1.6.2

    • Remove dependencies in favour of native methods. (@​zertosh in #21)
    Commits

    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
  • doc: add example for advanced directive usage

    doc: add example for advanced directive usage

    Update the website documentation to include a directive advanced usage.

    As mentioned in this issue https://github.com/vuejs-tips/vue-the-mask/issues/48#issue-280045671 the directive can be used with an object rather than a string.

    opened by cyrilf 0
  • please only work if there is a binding value

    please only work if there is a binding value

    Hello, vue-the-mask for me is the best choice for vue in mask. However, it has a small shortcoming. I usually return my form values with a v-for. But it tries to work even if I have sent the value undefined to the v-mask directive. I want it to work only if it has a value in it.

    For example, when I return an object like this, v-mask tries to work for my form value that does not contain the vMask value and breaks my form:

    vue-the-mask

    Workaround I found for now:

    vue-the-mask2

    I hope I was able to explain my request. Even if you don't fix it, I will continue with the workaround. Good luch with.

    opened by ssibrahimbas 1
  • Bump follow-redirects from 1.4.1 to 1.14.8

    Bump follow-redirects from 1.4.1 to 1.14.8

    Bumps follow-redirects from 1.4.1 to 1.14.8.

    Commits
    • 3d81dc3 Release version 1.14.8 of the npm package.
    • 62e546a Drop confidential headers across schemes.
    • 2ede36d Release version 1.14.7 of the npm package.
    • 8b347cb Drop Cookie header across domains.
    • 6f5029a Release version 1.14.6 of the npm package.
    • af706be Ignore null headers.
    • d01ab7a Release version 1.14.5 of the npm package.
    • 40052ea Make compatible with Node 17.
    • 86f7572 Fix: clear internal timer on request abort to avoid leakage
    • 2e1eaf0 Keep Authorization header on subdomain redirects.
    • Additional commits viewable in compare view

    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
Owner
Vue.js Tips
Learn Vue.js by building real world components
Vue.js Tips
Input mask library for vue.js based on credit-card-input-mask

vue-restricted-input Input mask for vue.js based on credit-card-input-mask Why ? credit-card-input-mask perfect work with carriage position, fast. Ins

Ivan Demidov 11 Nov 21, 2021
Simple zero-dependency input mask for Vue.js and vanilla JS.

Simple zero-dependency input mask for Vue.js and vanilla JS.

Alexander Shabunevich 451 Oct 6, 2022
🔡 Tiny input mask library for Vue.js (directive)

?? Tiny input mask library for Vue.js (directive)

Max Liashuk 824 Sep 24, 2022
A lightweight and dependency free input masking library created specific for Vue

Vue Input Facade A lightweight and dependency free input masking library created specific for Vue Docs and Demo Installing npm i vue-input-facade yarn

Ronald Jerez 139 Sep 14, 2022
Easy formatted numbers, currency and percentage with input/directive mask for Vue.js

vue-number-format Vue Number Format is used to format a number using fixed-point notation. It can be used to format a number with a specific number of

CodersTM 34 Sep 24, 2022
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

Text Mask 8.2k Sep 30, 2022
The awesome-mask runs with Vue.js and uses the vanilla-masker to make your form awesome with masks.

The awesome-mask runs with Vue.js and uses the vanilla-masker to make your form awesome with masks. You can use patterns like: <input type="text" v-ma

Wirecard Brasil 164 Aug 3, 2022
vue-r-mask - Directive with template similar to javascript regular expression.

vue-r-mask mask directive for vue.js Template similar to javascript regular expression. /\d{2}/ Directive useful for your own input or textarea. Arbit

null 22 May 1, 2022
Vue.js component for jQuery mask plugin

Vue jQuery Mask Component Vue.js component for jQuery Mask Plugin Demo on JSFiddle Version matrix Vue.js version Package version Branch 2.x 1.x 1.x 3.

Ankur Kumar 19 Mar 4, 2022
Nice-Numeric-Input is a modern, rich featured and highly customisable numeric input built on Vue.

Nice-Numeric-Input is a modern, rich featured and highly customisable numeric input built on Vue. Capable of formatting as the user types, including currency formatting. With no extra dependencies other than Vue itself.

Jack Steel 4 Dec 9, 2021
Vue Currency Input component allows an easy input of currency formatted numbers

Vue Currency Input The Vue Currency Input component allows an easy input of currency formatted numbers. It provides both standalone component (<curren

WeblineIndia 1 May 25, 2022
Click to show input text box Vue Component ... inspired by Trello. This is my first time publishing Vue Component via npm package and let me know if you encounter any issues, bugs, or improvement. Thanks!

label-edit Click to show input text box Vue Component ... inspired by Trello. This is my first time publishing Vue Component via npm package and let m

Myo Kyaw Htun 22 Apr 24, 2022
A fully customizable, OTP (one-time-password) input component built with Vue 3.x and Vue Composition API.

vue-otp-input A fully customizable, OTP (one-time-password) input component built with Vue 3.x and Vue Composition API. Installation To install the la

Ejiro Asiuwhu 39 Sep 23, 2022
A Vue.js (>= 3.2) web component that wraps around an html input of type 'range' with label and styling options.

range-comp range-comp is Vue.js (>= 3.2) web component that wraps around an html input of type 'range' with label and styling options. range-comp can

null 0 May 9, 2022
A tags input component for Vue 3 with autocompletion, custom validation, templating and much more

vue-tags-input A tags input component for Vue 3 with autocompletion, custom validation, templating and much more Forked from @johmun/vue-tags-input, w

Sinclair Chen 16 Aug 31, 2022
Vue Fake input is a Vue.js based component to create custom inputs for individual characters.

Vue Fake Input Vue Fake input is a Vue.js based component to create custom inputs for individual characters. Table of Contents Installation Usage Lice

Cláudio Luiz Castro 84 Jul 26, 2022
Set of vue directives to add text restriction to your vue input

Vue-Input-Restriction-Directives Set of useful vue directives to add text restriction to your input No keyboard key validation, just regular expressio

Benjamin Arambide 5 Nov 19, 2021
Masked input component for Vue.js

Vue Masked Input Dead simple masked input component for Vue.js 2.X. Based on inputmask-core. Live Demo Install npm npm install vue-masked-input --save

null 452 Sep 3, 2022
Input field component to display a formatted currency value based on Vue.js

vue-numeric Input field component to display a formatted currency value based on Vue. Live Demo Works with Vue 2.* Installation Install via CDN <scrip

Kevin Ongko 420 Sep 24, 2022