Vue.js component for jQuery mask plugin

Last update: Mar 4, 2022

Vue jQuery Mask Component

downloads npm-version github-tag license

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.x 2.x master

Requirements

  • jQuery >=1.7.0
  • Vue 3.x

Installation

# Yarn
yarn add vue-jquery-mask

# npm
npm install vue-jquery-mask

Using Webpack?

// webpack.config.js
plugins: [
    new webpack.ProvidePlugin({     
      jQuery: 'jquery',
      'window.jQuery': 'jquery',
      $: 'jquery',     
    }),
  ]  

Usage Example

<template>
  <div>
    <vue-mask 
        class="form-control" 
        v-model="date"  
        mask="00/00/0000" 
        :raw="false"
        :options="options"> 
    </vue-mask>
  </div>
</template>

<script>
  // Import this component
  import vueMask from 'vue-jquery-mask';
  
  export default {    
    data () {
      return {
        date: null,
        options: {
          placeholder: '__/__/____',
          // http://igorescobar.github.io/jQuery-Mask-Plugin/docs.html
        }       
      }
    },
    components: {
      vueMask
    }
  }
</script>

As plugin

  import {createApp} from 'vue';
  import VueMask from 'vue-jquery-mask';
  const app = createApp().mount('#app')   
  app.use(VueMask);

This will register a global component <vue-mask>

Available props

The component accepts these props:

Attribute Type Default Required? Description
v-model String / null null true Set or Get input value
mask String / Function true Masking pattern
options Object {} false Configuration options
raw Boolean true false When set to false; emits formatted value with format pattern and delimiters

Install in non-module environments (without webpack)

<!-- Vue js -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
<!-- Lastly add this package -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
<!-- Register global component -->
<script>
// Your app init logic may go here
app.use(VuejQueryMask)
</script>

Run examples on your localhost

  • Clone this repo
  • You should have node-js >=10.13 and yarn >=1.x pre-installed
  • Install dependencies - yarn install
  • Run webpack dev server - yarn start
  • This should open the demo page at http://localhost:9000 in your default web browser

Changelog

Please see CHANGELOG for more information what has changed recently.

License

MIT License

GitHub

https://github.com/ankurk91/vue-jquery-mask
You might also like...

Vue Fake input is a Vue.js based component to create custom inputs for individual characters.

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

Jul 26, 2022

A fully customizable, OTP (one-time-password) input component built with Vue 3.x and Vue Composition API.

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

Jul 28, 2022

Vue Cleave component is based on cleave.js for Vue

Vue Cleave component is based on cleave.js for Vue

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

Aug 1, 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

Jul 25, 2022

A Vue.js component that wraps the awesome autoNumeric input formatter library

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

Jul 28, 2022

A custom input number component for Vue.js 2

vue-input-number A custom input number component for Vue.js 2. Install Yarn yarn add vue-input-number --dev NPM npm install vue-input-number --save-de

Jul 24, 2022

Vue.js component for Cleave.js :keyboard:

Vue Cleave Component Vue.js component for Cleave.js Demo on JSFiddle Version matrix Vue.js version Package version Branch 2.x 2.x 2.x 3.x 3.x master F

Jul 20, 2022

A versetile tag input component built with Vue 3 Composition API

A versetile tag input component built with Vue 3 Composition API

A versetile tag input component built with Vue 3 Composition API

Jun 9, 2022
Comments
  • 1. Using v-if doesn't apply proper mask

    I have two masked input fields and I need to show only one of the two. Unfortunately, when I use v-if it doesn't apply the proper mask on the second element. It applies the mask of the first element to the second element.

    I knowv-show is an option but in this case, I need to use v-if so one of the input won't send data to the server.

    Reviewed by markandrewkato at 2018-10-09 13:08
  • 2. When I use clearIfNotMatch and the mask not match, v-model does not update

    You can check in this example https://jsfiddle.net/ankurk91/d92xgzhL/, just add the clearIfNotMatch: true, in the options, and put a wrong value on input.

    I think the right thing would be when the value does not match the mask, the v-model should be blank, equal to the input value.

    I looked at the source code, and realized that have to modify on the component.vue:

    onBlur(event) {
        this.$emit('blur', this.value)
    }
    

    to:

    onBlur(event) {
        this.$nextTick(() => {
            let toEmit = this.raw ? jQuery(this.$el).cleanVal() : event.target.value;
            this.$emit('input', toEmit);
            this.$emit('blur', this.value)
        });
    }
    

    Once the onBlur event is triggered it should update the value of the v-model because the field can clear because of the wrong value for the mask.

    If possible, I'd like you to take a look, I'm needing too much of this component.

    Thank you very much in advance.

    Reviewed by luisenriquegomesportugal at 2018-11-21 15:42
  • 3. Binding required attribute dynamically doesn't work conditionally

    Hi,

    I tried binding the required attribute dynamically like so:

    <vue-mask id="rental_amount"
                        name="amount"
                        mask="000,000,000.00"
                        :options="{reverse: true}"
                        type="text"
                        :required="isRequired"
                        :aria-required="isRequired"></vue-mask>
    

    I want the required attribute to be conditional. The plugin generated a required="required" attribute even if the isRequired data is false.

    Is there a way to make this conditional?

    Reviewed by markandrewkato at 2018-10-09 12:56
  • 4. v-model value not gets updated on backspace

    This should be fixed as soon as

    https://github.com/igorescobar/jQuery-Mask-Plugin/pull/656 OR https://github.com/igorescobar/jQuery-Mask-Plugin/pull/674

    gets merged

    Another way is to listen to input event

    <input :type="type"  @input="onInput">
    
     onInput(e) {
            let toEmit = this.raw ? jQuery(this.$el).cleanVal() : e.target.value;
            this.$emit('input', toEmit);
          },
    
    Reviewed by ankurk91 at 2018-08-06 06:53
Input mask for React, Angular, Ember, Vue, & plain JavaScript
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

Aug 17, 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

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

May 1, 2022
Tiny (2k gzipped) and dependency free mask input for Vue.js
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

Aug 15, 2022
Simple zero-dependency input mask for Vue.js and vanilla JS.

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

Aug 15, 2022
🔡 Tiny input mask library for Vue.js (directive)

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

Aug 7, 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

Aug 1, 2022
Tiny (2k gzipped) input/directive mask for currency
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

Aug 4, 2022
A jQuery Plugin to make masks on form fields and HTML elements.

jQuery Mask Plugin A jQuery Plugin to make masks on form fields and HTML elements. Documentation, Demos & Usage Examples https://igorescobar.github.io

Aug 8, 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

Apr 24, 2022