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

Related tags

Masked Input vuejs inputmask vue-directive
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
  • Bump loader-utils from 1.1.0 to 1.4.1

    Bump loader-utils from 1.1.0 to 1.4.1

    Bumps loader-utils from 1.1.0 to 1.4.1.

    Release notes

    Sourced from loader-utils's releases.

    v1.4.1

    1.4.1 (2022-11-07)

    Bug Fixes

    v1.4.0

    1.4.0 (2020-02-19)

    Features

    • the resourceQuery is passed to the interpolateName method (#163) (cd0e428)

    v1.3.0

    1.3.0 (2020-02-19)

    Features

    • support the [query] template for the interpolatedName method (#162) (469eeba)

    v1.2.3

    1.2.3 (2018-12-27)

    Bug Fixes

    • interpolateName: don't interpolated hashType without hash or contenthash (#140) (3528fd9)

    v1.2.2

    1.2.2 (2018-12-27)

    Bug Fixes

    • fixed a hash type extracting in interpolateName (#137) (f8a71f4)

    v1.2.1

    1.2.1 (2018-12-25)

    ... (truncated)

    Changelog

    Sourced from loader-utils's changelog.

    1.4.1 (2022-11-07)

    Bug Fixes

    1.4.0 (2020-02-19)

    Features

    • the resourceQuery is passed to the interpolateName method (#163) (cd0e428)

    1.3.0 (2020-02-19)

    Features

    • support the [query] template for the interpolatedName method (#162) (469eeba)

    1.2.3 (2018-12-27)

    Bug Fixes

    • interpolateName: don't interpolated hashType without hash or contenthash (#140) (3528fd9)

    1.2.2 (2018-12-27)

    Bug Fixes

    • fixed a hash type extracting in interpolateName (#137) (f8a71f4)

    1.2.1 (2018-12-25)

    ... (truncated)

    Commits
    Maintainer changes

    This version was pushed to npm by evilebottnawi, a new releaser for loader-utils 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] 1
  • 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
  • Bump loader-utils from 1.1.0 to 1.4.2

    Bump loader-utils from 1.1.0 to 1.4.2

    Bumps loader-utils from 1.1.0 to 1.4.2.

    Release notes

    Sourced from loader-utils's releases.

    v1.4.2

    1.4.2 (2022-11-11)

    Bug Fixes

    v1.4.1

    1.4.1 (2022-11-07)

    Bug Fixes

    v1.4.0

    1.4.0 (2020-02-19)

    Features

    • the resourceQuery is passed to the interpolateName method (#163) (cd0e428)

    v1.3.0

    1.3.0 (2020-02-19)

    Features

    • support the [query] template for the interpolatedName method (#162) (469eeba)

    v1.2.3

    1.2.3 (2018-12-27)

    Bug Fixes

    • interpolateName: don't interpolated hashType without hash or contenthash (#140) (3528fd9)

    v1.2.2

    1.2.2 (2018-12-27)

    Bug Fixes

    ... (truncated)

    Changelog

    Sourced from loader-utils's changelog.

    1.4.2 (2022-11-11)

    Bug Fixes

    1.4.1 (2022-11-07)

    Bug Fixes

    1.4.0 (2020-02-19)

    Features

    • the resourceQuery is passed to the interpolateName method (#163) (cd0e428)

    1.3.0 (2020-02-19)

    Features

    • support the [query] template for the interpolatedName method (#162) (469eeba)

    1.2.3 (2018-12-27)

    Bug Fixes

    • interpolateName: don't interpolated hashType without hash or contenthash (#140) (3528fd9)

    1.2.2 (2018-12-27)

    Bug Fixes

    ... (truncated)

    Commits
    Maintainer changes

    This version was pushed to npm by evilebottnawi, a new releaser for loader-utils 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
  • 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
GitHub
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 165 Dec 6, 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 687 Jan 1, 2023
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 Nov 15, 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 836 Dec 20, 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 Dec 29, 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 47 Dec 18, 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 743 Dec 28, 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 Nov 13, 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 149 Dec 12, 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 14 Oct 7, 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 Dec 18, 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 41 Nov 4, 2022
Vue Cleave component is based on cleave.js for Vue

Vue Cleave component is based on cleave.js for Vue

null 108 Dec 22, 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 451 Dec 27, 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 428 Dec 29, 2022