Vue.js directive to add inputmask library to your inputs (vanilla javascript).

Overview

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://github.com/RobinHerbots/Inputmask

Vue-inputmask demo

This library is licensed under MIT License.

Install

npm install -S vue-inputmask

Setup

With Typescript

import Vue from 'vue'
const VueInputMask = require('vue-inputmask').default

Vue.use(VueInputMask)

With a script tag

<script src="./node_modules/inputmask/dist/inputmask/dependencyLibs/inputmask.dependencyLib.js"></script>
<script src="./node_modules/inputmask/dist/inputmask/inputmask.js"></script>
<script src="./dist/vue-inputmask-browser.js"></script>

Usage

<input type="text" v-mask="'99/99/9999'" />
<input type="text" v-mask="{mask: '99/99/9999', greedy: true}" v-on:change="maskCheck"/>
new Vue({
  ...
  methods: {
    maskCheck: function (field){
      if (field.target.inputmask.isComplete()) {
        console.log('is Complete');
      } else {
        console.log('is Incomplete');
      }
    }
  }
});
Comments
  • Cannot find module

    Cannot find module "inputmask.dependencyLib"

    Hello, I get this error trying to use inputmask:

    Uncaught Error: Cannot find module "inputmask.dependencyLib"
        at webpackMissingModule (inputmask.js:9)
        at ./node_modules/vue-inputmask/3rd/inputmask.js.ua (inputmask.js:9)
        at Object../node_modules/vue-inputmask/3rd/inputmask.js (inputmask.js:10)
        at __webpack_require__ (bootstrap 508b121…:19)
        at vue-inputmask.js:11
        at Object../node_modules/vue-inputmask/vue-inputmask.js (vue-inputmask.js:21)
        at __webpack_require__ (bootstrap 508b121…:19)
        at Object.<anonymous> (account.js:52)
        at Object../resources/assets/js/account.js (account.ee47c2a….js:27790)
        at __webpack_require__ (bootstrap 508b121…:19)
    
    opened by ctkc 6
  • Multiple masks

    Multiple masks

    Hi I have trouble to make it work with multi mask. My input looks like: <input type="tel" name="phone" v-model.trim="form.phone" v-mask="phoneMask"> And later on in data I have: phoneMask: { mask() { return ['999-999-999[9]', '9{11,}']; }}

    I also tried more direct: phoneMask: { mask: ['999-999-999[999]', '9{11,}'] }

    It looks like it always filters with first mask only. I had an old code and more manual binding - than it was working with both masks, but there were other formatting issues (note important in this case). Am I doing something wrong?

    opened by mariuszniemiec 3
  • Use with extensions?

    Use with extensions?

    Can't get it to work with extensions.

    If I try this, it seems to interpret the alias "currency" as the mask.

    <input v-mask="{alias: 'currency'}">

    I also tried copying the currency extension itself into the Vue component's data. Copied directly from inputmask.numeric.extensions.js

    data() {
      return {
        currency: {
          prefix: "$ ",
          groupSeparator: ",",
          alias: "numeric",
          placeholder: "0",
          autoGroup: true,
          digits: 2,
          digitsOptional: false,
          clearMaskOnLostFocus: false
        }
      }
    }
    

    And then

    <input v-mask="currency">

    But it's the same thing. It just uses the alias "numeric" as the mask, and ignores all of the other options.

    opened by andrewtweber 3
  • ES6 Import fails

    ES6 Import fails

    Hello, I try to import module but I get this error

    Error: The keyword 'static' is reserved (728:16) in C:\OpenServer\domains\a.new\node_modules\vue-inputmask\3rd\inputmask.js
    

    my code

    
    // root import
    import Vue from 'vue';
    import axios from 'axios';
    import VueAxios from 'vue-axios';
    import VueCookie from 'vue-cookie';
    import VueInputmask from 'vue-inputmask';
    
    // own components
    import CityChooser from './vue_components/main/city_chooser.vue';
    import CartInformer from './vue_components/cart/cart_informer.vue';
    import RequestCall from './vue_components/main/request_call.vue';
    import AuthForm from './vue_components/main/auth.vue';
    
    window.Event = new Vue();
    
    // install plugins
    Vue.use(VueAxios, axios);
    Vue.use(VueCookie);
    Vue.use(VueInputmask);
    
    new Vue({
        el: '#root',
        components: {
            CityChooser,
            CartInformer,
            RequestCall,
            AuthForm
        }
    });
    
    bug 
    opened by atakajlo 2
  • Error Dynamic masks

    Error Dynamic masks

    My mask:

    mask: '( 999){+|1} $',
      numericInput: true,
      placeholder: '0',
      definitions: {
        '0': {
          validator: '[0-9]'
       }
    }
    

    Inputmask: There is probably an error in your mask definition or in the code. Create an issue on github with an example of the mask you are using. ( 999){+|1} $

    Docs: https://github.com/RobinHerbots/Inputmask#dynamic-masks

    opened by web-west 1
  • Applying v-mask to an input with v-model applied to it makes the v-model no longer update data

    Applying v-mask to an input with v-model applied to it makes the v-model no longer update data

    Applying v-mask to an input with v-model applied to it makes the v-model no longer work.

    Ex: <input v-mask="'999'" v-model='test' /> applies the mask, but test doesn't update on input.

    <input v-model='test' /> works as intended, but with no mask.

    Using vue-inputmask-browser imported through a script tag

    opened by mtblanton 1
  • Uncaught Error: Cannot find module

    Uncaught Error: Cannot find module "vue-inputmask"

    I am using vue-inputmask by import method but it give error : Uncaught Error: Cannot find module "vue-inputmask"

    import Vue from 'vue'
    var VueInputmask = require('vue-inputmask');
    Vue.use(VueInputmask);
    
    opened by waqasasif9292 1
  • I work update from 4.0.6 to 4.0.8 it do not work float number?

    I work update from 4.0.6 to 4.0.8 it do not work float number?

    Before I use version 4.0.6 it work but after update it do not work

    ` Vue.directive('inputmask', { bind: function (el, binding) { var inputs = el.getElementsByTagName('INPUT') var input = inputs[0] if (inputs.length > 1) { input = inputs[inputs.length - 1] } // console.log(input) new Inputmask(binding.value).mask(input) }, })

    Example I Type 12.5 so sign dot point not work please any suggestion

    opened by phanchanra 0
  • Change mask

    Change mask

    <input type="text" class="form-control" id="phone" name="phone" v-mask="phone.mask" :placeholder="phone.placeholder" required>
    
    setPhoneCode: function (country) {
                    switch (country) {
                        case 'rus':
                            this.phone.flag = 'πŸ‡·πŸ‡Ί ';
                            this.phone.code = '+7';
                            this.phone.placeholder = '(___) ___-__-__';
                            this.phone.mask = '(999) 999-99-99';
                            break;
                        case 'kzt':
                            this.phone.flag = 'πŸ‡°πŸ‡Ώ ';
                            this.phone.code = '+7';
                            this.phone.placeholder = '(___) ___-__-__';
                            this.phone.mask = '(999) 999-99-99';
                            break;
                        case 'uk':
                            this.phone.flag = 'πŸ‡ΊπŸ‡¦ ';
                            this.phone.code = '+380';
                            this.phone.placeholder = '(__) ___-__-__';
                            this.phone.mask = '(99) 999-99-99';
                            break;
                        case 'by':
                            this.phone.flag = 'πŸ‡§πŸ‡Ύ ';
                            this.phone.code = '+375';
                            this.phone.placeholder = '(__) ___-__-__';
                            this.phone.mask = '(99) 999-99-99';
                            break;
                    }
                }
    

    Don't work v-mask="phone.mask" when i change country What i can do?

    opened by dulingleb 3
Owner
Simon Cleriot
Simon Cleriot
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
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-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
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
πŸ”‘ Tiny input mask library for Vue.js (directive)

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

Max Liashuk 824 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
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 directive to restrict an input by unicode values

v-unicode Vue directive to restrict an input by unicode values. It allows the input to be used just with the defined unicodes. It also sanitizes the v

Nicolas Del Valle 14 Sep 15, 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
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 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
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
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
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
Vue Cleave component is based on cleave.js for Vue

Vue Cleave component is based on cleave.js for Vue

null 107 Mar 31, 2022
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