The awesome-mask runs with Vue.js and uses the vanilla-masker to make your form awesome with masks.

Overview

The awesome-mask runs with Vue.js and uses the vanilla-masker to make your form awesome with masks. Download Count Npm Version

You can use patterns like:

<input type="text" v-mask="'99/99'" />
// Turns 1224 in 12/24
<input type="text" v-mask="'(99) 9999-9999'" />
// Turns 1149949944 in (11) 4994-9944
<input type="text" v-mask="'AAA-9999'" />
// Turns ABC1234 in ABC-1234

You can also format money:

<input type="text" v-mask="'money'" />
// Turns 123499 in 1.234,99

This directive can also receive a object from your data like:

<template>
  <p>
    <input v-mask="mask" type="text">
  </p>
</template>

<script>
 export default {
   data() {
     return {
       mask: '999.999.999-99'
     }
   }
 }
</script>

Sample using import:

<script>
import Component from './components/Component'
import AwesomeMask from 'awesome-mask'

export default {
  name: 'app',
  components: {
    Component
  },
  directives: {
    'mask': AwesomeMask
  }
}
</script>

Examples

Comments
  • How to setup dynamic mask?

    How to setup dynamic mask?

    Looking for dynamic brazilian phone like http://codepen.io/lagden/pen/meemqG as mentioned at https://github.com/BankFacil/vanilla-masker

    How can I configure this with VueJS directive?

    question 
    opened by alexsandro-xpt 18
  • Not downloading on npm

    Not downloading on npm

    Hello,

    i was trying to download the package with "npm i --save awesome-mask" but the download crash after a few seconds.

    May be this is a npm issue ?

    opened by BRKsDeadPool 13
  • Value from database not formatting correctly

    Value from database not formatting correctly

    Hello,

    I'm facing an issue, that occurs when I retrieve a BigDecimal from my Oracle database, I have a value of 120.1 and when it's loaded to the input masked with money it loads 12,01 not considering the decimal separator. Is there any configuration that makes an autocomplete to work arround this case?

    opened by HenryP3 10
  • not working

    not working

    it shoed this errror -

    Failed to resolve directive: mask 
    (found in anonymous component - use the "name" option for better debugging messages.)
    

    I instaled with npm , do I have to import ?

    opened by murilolivorato 5
  • Mask with computed bind keep backing to old format

    Mask with computed bind keep backing to old format

    In a form, with two options: Pessoa Juridica | Pessoa fisica

    <input type="text" v-mask="cpfCnpjMask" v-model.lazy="plan.cpfCnpj" and more stuff for cnpj...>
    <input type="text" v-mask="cpfCnpjMask" v-model.lazy="plan.cpfCnpj" and more stuff for cpf...>
    computed:{
                cpfCnpjMask(){
                    return this.isLegalPerson ? '99.999.999/9999-99' : '999.999.999-99';
                }
            },
    

    the default mask will be '999.999.999-99'. when i change to Pessoa Juridica, the mask will update to '99.999.999/9999-99'. but on next change on value, the mask change again to '999.999.999-99'.

    Here is a gif, should be better to understand

    maskbug

    Is my mistake or really a unexpected behavior?

    Thanks guys!

    opened by guilhermewaess 5
  • Pasting in input without updating data in Vuejs

    Pasting in input without updating data in Vuejs

    I am having problems when the user paste the value of the field(ctrl + v). The field fullfil the mask correctly, but the element in the data property in vuejs stays without the mask. Have you been through this?

    Code:

    import AwesomeMask from 'awesome-mask'
    
    Vue.directive('mask', AwesomeMask);
    
    new Vue ({
        el: '#inicialEmail',
        data: {
            action: '',
            requestType: '',
            inscricao: {
                nomcan: '',
                emailcan: '',
                celcan: ''
            }
        })
    

    Example:

    Copy paste:

    image

    Write:

    image

    opened by joohncruz 5
  • Apply mask to default value.

    Apply mask to default value.

    First of all, congratulations for the initiative. Excellent job.

    How do I get the value to be formatted in an assignment to the v-model variable?

    The mask works in the course of typing only. Is there a way to apply the mask to the default value of an input?

    Thank you very much for your time.

    enhancement 
    opened by xereda 5
  • Event is not a constructor' error everytime I type in v-mask

    Event is not a constructor' error everytime I type in v-mask

    On every place I use v-mask, every change that i have on the text throws an 'Event is not a constructor' error.

    It works normally and the way expected, but keeps throwing this error. Anyone knows what could be?

    opened by tgambim 3
  • Added support for Vue custom components

    Added support for Vue custom components

    Solves issue #25.

    Simple solution: the used element was the component's root, instead of the input itself.

    The proper input was used to attach the events, but not for everything else. Solved by just sending the input element to everywhere the root element was being passed onto.

    opened by matheusgrieger 3
  • Usage with Component input

    Usage with Component input

    Is it possible to use together with component inputs, such as Vuetify's Text fields?

    I've tried and it throws a "Cannot read property 'length' of undefined" error.

    opened by matheusgrieger 3
  • Issue with v-model

    Issue with v-model

    Hello,

    we found a bug within a very reasonable and common use case. So, we are using same form for adding and editing our data. It works perfectly in "Add" form when all fields are empty. Issue occurs when you edit data (so you already have filled form with existing data).

    Our instance has a lot of fields in data, and one of them is using your plugin. On input of that field we are using v-model="'money'" directive. So, when you first initialize "Edit" form everything is displayed correctly, including the field with v-mask. But when you change and of the form data field loses mask. I think the problem is when you initialize the plugin. So, if we provide input with v-mask with value 1500 we are expecting "15,00" value in our component data field and that seems to work at first. When some other data is changed that input changes to 1500 effectively losing the mask. This is not desired. I forked your examples repo and added name property to data with value "Ivan". I also created additional input after your price input with mask. You can clone the repo here.

    I also recorded a video showing a bug. I think that issue is that component data is not properly changed upon plugin initialization. So in videos example you have a price data field with a value 20. I think that it should be converted to "0,20" immediately after the initialization but that doesn't happen. Our "fix" is to programmatically trigger a change event for our input which would force plugin to convert 20 to "0,20" and from that point it works fine.

    opened by IvanBernatovic 3
  • Add ability to pass through options to vanilla-masker

    Add ability to pass through options to vanilla-masker

    Fix for #39.

    Introduces ability to pass through options to vanilla-masker. Backwards compatible, so using awesome-mask the way you have works fine, just lets you pass an object instead with value for the mask and passing other options straight through.

    opened by kball 1
  • Allow options to be passed through to vanilla-masker

    Allow options to be passed through to vanilla-masker

    There are a variety of configuration options available to both the toMoney and the toPattern methods in vanilla-masker that would be useful to expose. I'm thinking probably we simply extend the logic that looks at the value passed in, and if it is an object plucks off the value key as value and the rest as options.

    I need this for a current client project so I will implement a fix and submit a PR.

    opened by kball 0
Releases(1.1.1)
Owner
Wirecard Brasil
Descomplique soluções financeiras
Wirecard Brasil
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
Vue.js directive to add inputmask library to your inputs (vanilla javascript).

vue-inputmask Vue.js directive to add a mask to your inputs (vanilla javascript). It's a binding for the inputmask library by Robin Herbots https://gi

Simon Cleriot 117 Jul 17, 2022
Tiny (2k gzipped) and dependency free mask input for Vue.js

The Mask A lightweight (2KB gzipped) and dependency free mask input created specific for Vue.js Docs and Demo JsFiddle Install yarn add vue-the-mask o

Vue.js Tips 1.6k Sep 20, 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
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
🔡 Tiny input mask library for Vue.js (directive)

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

Max Liashuk 824 Sep 24, 2022
Tiny (2k gzipped) input/directive mask for currency

v-money Mask for Vue.js Features Lightweight (<2KB gzipped) Dependency free Mobile support Component or Directive flavors Accept copy/paste Editable F

Vue.js Tips 741 Sep 23, 2022
A Vue.js component that wraps the awesome autoNumeric input formatter library

vue-autoNumeric A Vue.js component that wraps the awesome AutoNumeric input formatter library Get in touch on vue-autoNumeric wraps the awesome AutoNu

AutoNumeric 86 Sep 27, 2022
A Simple Input Form For Vue 3

vue-base-input (Vue 3) Base-input: I made it, for simplify a create form on my differents projects. Base-input return if your value is valid and value

Olivier MARION 1 Dec 13, 2021
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
A simple, customization star rating component for your vue3 projects

A simple, customization star rating component for your vue3 projects

Abiodun Olunu 13 Sep 24, 2022
Obtain AST by reading vue and react source code, and then dynamically add tags

Obtain AST by reading vue and react source code, and then dynamically add tags

沧海 3 Sep 27, 2021
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 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
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