Masked input component for Vue.js

Overview

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

Usage

Use it with v-model just like a native html input with the mask attribute:

<masked-input v-model="date" mask="11/11/1111" placeholder="dd/mm/yyyy" />

The following format characters define editable parts of the mask (see inputmask-core):

  • 1 - number
  • a - letter
  • A - letter, forced to upper case when entered
  • * - alphanumeric
  • # - alphanumeric, forced to upper case when entered
  • + - any character

Static characters

If you need to include one of these characters as a static part of the mask, you can escape them with a preceding backslash:

<masked-input v-model="phone" mask="\+\1 (111) 111-1111" placeholder="Phone number" type="tel" />

Raw input

You can also get a raw user input text if you want. Instead of using v-model you might need second argument of the input event:

<masked-input mask="\+\1 (111) 1111-11" placeholder="Phone" @input="rawVal = arguments[1]" />

Placeholder character

Placeholder character is customizable by placeholder-char attribute:

<masked-input v-model="phone" mask="\+\1 (111) 111-1111" placeholder-char="-" placeholder="Phone number" type="tel" />

Custom mask object

You can use your own mask options object, it will be passed to the inputmask-core constructor:

<masked-input
  v-model="custom"
  placeholder="Custom"
  :mask="{
    pattern: 'VVVV',
    formatCharacters: {
      'V': {
        validate: char => /[a-jA-J]/.test(char),
        transform: char => char.toUpperCase(),
      },
    },
  }"
/>

Known issues/TODO

  • Cut in mobile Chrome
  • Cyrillic chars are not supported in mobile Chrome
  • Backspace problems in mobile Chrome

Found more? It's open for feedback and pull requests

Comments
  • Unexpected character '`'  problem

    Unexpected character '`' problem

    Hi,

    thank u first, npm run build problem

    ERROR in static/js/vendor.45cf410bef1d1ee48a7d.js from UglifyJs Unexpected character '`' [./~/vue-masked-input/src/MaskedInput.js:7,0][static/js/vendor.45cf410bef1d1ee48a7d.js:61918,12]

    what is the problem ? how to fix ? Ie not working app

    opened by mesutgok 8
  • cannot compile in gulp

    cannot compile in gulp

    I downloaded your package in my laravel 5.3 + vuejs 2.1.3 npm install vue-masked-input --save

    then in app.js import MaskedInput from 'vue-masked-input';

    then in vue component I have field (I also have vee-validate)

    <div class="form-group col-xs-12 col-sm-6" :class="{'has-error': errors.has('phone') }">
             <label>phone</label>
             <div class="input-group">
                     <span class="input-group-addon"><i class="fa fa-phone"></i></span>
                     <masked-input v-model="phone" mask="\+\7 (111) 111-11-11" placeholder="phone" name="phone"/>
             </div>
             <p class="text-danger" v-if="errors.has('phone')">{{ errors.first('phone') }}</p>
    </div>
    

    then I have errors when trying to compile all this in gulp.

    > gulp
    [19:50:45] Using gulpfile d:\OpenServer\domains\mysite.new\gulpfile.js
    [19:50:45] Starting 'all'...
    [19:50:45] Starting 'copy'...
    [19:50:45] Finished 'copy' after 55 ms
    [19:50:45] Starting 'copy'...
    [19:50:45] Finished 'copy' after 9.93 ms
    [19:50:45] Starting 'sass'...
    [19:50:46] Finished 'sass' after 883 ms
    [19:50:46] Starting 'styles'...
    [19:50:46] Finished 'styles' after 52 ms
    [19:50:46] Starting 'webpack'...
    { [Error: ./~/buble-loader!./~/vue-loader/lib/selector.js?type=script&index=0!./~/vue-masked-input/src/MaskedInput.vue
    Module build failed: Error
        at ForOfStatement.initialise (d:\OpenServer\domains\mysite.new\node_modules\buble\dist\buble.umd.js:2004:65)
        at d:\OpenServer\domains\mysite.new\node_modules\buble\dist\buble.umd.js:9381:56
        at Array.forEach (native)
        at BlockStatement.initialise (d:\OpenServer\domains\mysite.new\node_modules\buble\dist\buble.umd.js:9381:15)
        at Node.initialise (d:\OpenServer\domains\mysite.new\node_modules\buble\dist\buble.umd.js:858:12)
        at d:\OpenServer\domains\mysite.new\node_modules\buble\dist\buble.umd.js:9381:56
        at Array.forEach (native)
        at BlockStatement.initialise (d:\OpenServer\domains\mysite.new\node_modules\buble\dist\buble.umd.js:9381:15)
        at FunctionExpression.initialise (d:\OpenServer\domains\mysite.new\node_modules\buble\dist\buble.umd.js:858:12)
     @ ./~/vue-masked-input/src/MaskedInput.vue 5:18-105
     @ ./resources/assets/js/frontend/app.js]
      message: './~/buble-loader!./~/vue-loader/lib/selector.js?type=script&index=0!./~/vue-masked-input/src/MaskedInput.vue\nModule build fai
    led: Error\n    at ForOfStatement.initialise (d:\\OpenServer\\domains\\mysite.new\\node_modules\\buble\\dist\\buble.umd.js:2004:65)\n    a
    t d:\\OpenServer\\domains\\mysite.new\\node_modules\\buble\\dist\\buble.umd.js:9381:56\n    at Array.forEach (native)\n    at BlockStateme
    nt.initialise (d:\\OpenServer\\domains\\mysite.new\\node_modules\\buble\\dist\\buble.umd.js:9381:15)\n    at Node.initialise (d:\\OpenServ
    er\\domains\\mysite.new\\node_modules\\buble\\dist\\buble.umd.js:858:12)\n    at d:\\OpenServer\\domains\\mysite.new\\node_modules\\buble\
    \dist\\buble.umd.js:9381:56\n    at Array.forEach (native)\n    at BlockStatement.initialise (d:\\OpenServer\\domains\\mysite.new\\node_mo
    dules\\buble\\dist\\buble.umd.js:9381:15)\n    at FunctionExpression.initialise (d:\\OpenServer\\domains\\mysite.new\\node_modules\\buble\
    \dist\\buble.umd.js:858:12)\n @ ./~/vue-masked-input/src/MaskedInput.vue 5:18-105\n @ ./resources/assets/js/frontend/app.js',
      showStack: false,
      showProperties: true,
      plugin: 'webpack-stream',
      __safety: { toString: [Function: bound ] } }
    
    
    opened by schel4ok 7
  • Unexpected token import

    Unexpected token import

    Hi! What I doing wrong, i did:

    npm install vue-masked-input --save
    
    import MaskedInput from 'vue-masked-input';
    
    components:{
          MaskedInput
    }
    

    And then i'll receive the error: Uncaught SyntaxError: Unexpected token import on import InputMask from 'inputmask-core' at MaskedInput.js

    Any clue?

    opened by guilhermewaess 3
  • How to use with others directives?

    How to use with others directives?

    Do you have any idea how to use with vee-validator?

    <masked-input type="text" v-model="birth_date" mask="11/11/1111" v-validate data-vv-rules="required" />

    opened by MauriMelo 3
  • Compatibility with Vuejs 3

    Compatibility with Vuejs 3

    I have a vue-cli project and I cannot even setup the plugin to work, is it compatible? For instance, in vuejs 3 you usually have to import the component before you could do but you lack this in the setup guide. I tried it and it still didn't work.

    opened by iBobb 2
  • @blur event not working

    @blur event not working

    I can't get @blur event to trigger using your library.

    Here is the input with your library:

    <masked-input type="text" class="form-control" name="birthday" v-model="form.birthday" placeholder="mm/dd/yyyy" mask="11/11/1111" @blur="ageFromBirthday" />

    Here is the same thing on a normal input:

    <input type="text" class="form-control" name="birthday" v-model="form.birthday" placeholder="mm/dd/yyyy" @blur="ageFromBirthday" />

    It just doesn't work with your library, is this a known issue? I am the latest version of your library as well.

    opened by shawjak3 2
  • Can I do a Price format mask ?

    Can I do a Price format mask ?

    Nice code my friend . Congratulations . Can I make a price format mask ?

    if I type this -

    6756756075607665088
    

    It will shows -

    67.567.560.756.076.650,88
    

    Thanks

    opened by murilolivorato 2
  • Optional number

    Optional number

    Hi, in Brazil we have mobile phone like this (xx) x xxxx-xxxx and normal phone like this (xx) xxxx-xxxx

    So, using jquery mask I was able do do something like this: $(".phone").mask("(99) 9999-9999?9");

    The last number is optional using the question mark, is there a way to do that unsing your component? Thanks

    enhancement 
    opened by renanpro03 2
  • Laravel Mix Webpack Production Compilation Problem

    Laravel Mix Webpack Production Compilation Problem

    I found an issue with ff-polyfill.js when trying to compile my app for production.

    It was throwing an error and failing...

    SyntaxError: Unexpected token: punc ()) [./~/vue-masked-input/src/ff-polyfill.js:2,0]

    I needed to change

    export default () => {

    to

    export default function() {

    then everything worked fine :)

    opened by plexus77 2
  • Overriding pre-loaded value from v-model

    Overriding pre-loaded value from v-model

    When I have a pre-loaded value on the model, it is changed by the component. Example:

    ...
        data () {
            return {
                time: '00:00:00:00'
            }
        },
    ...
    
    <masked-input v-model="time" mask="+ 11:11" />
    

    It doesn't load the value from the time model, instead it overrides with empty value. The only way I made it work was to reset the time variable on mounted() method:

    mounted () {
        this.time = '00:00:00:00'
    }
    
    bug 
    opened by gabrielboliveira 2
  • caret jumps backwards

    caret jumps backwards

    I tried to create a mask for numbers with dots as thousands-separator. My mask is in the array-format, and I figured out that each mask entry needs be exactly one character longer:

        [
           '###',
            '####', // workaround to prevent '1.11'
            '#.###',
            '##.###',
            '###.###',
            '####.###', // workaround to prevent '1.000.00'
            '#.###.###',
            '##.###.###',
        ]
    

    The mask itself works fine so far, but if the same character is entered repeatedly, the caret will not end up at the end but move one or two spaces backwards. This seems to happen when the two workaround mask entries are jumped over. If different numbers are entered, the caret stays at the end as intended.

    1.0|0 10.000.0|00

    opened by wirk 1
  • Php relevant library

    Php relevant library

    Hi, it's a bit offtop, but this widget use plugin inputmask-core, I need to use the same formatting on backend side.

    Maybe somebody heard if is there a library similar for this but in php?

    Thanx

    opened by halws 0
  • Input always disabled

    Input always disabled

    Hey,

    1. input field always disabled

    2. when I try to input a text I get an the error

    Error in v-on handler: "TypeError: Cannot read property 'setSelection' of null"

    opened by alexandrmiee 0
  • Multiple masks

    Multiple masks

    Hey, I wanted to add multiple masks to phone input, but it don't really work. <masked-input type="tel" name="phone" v-model.trim="phone" mask="['+\\9\\96 (999) 99-99-99', '+7 (999) 999-99-99']" >

    Seems like it don't read arrays

    opened by 1encore 0
  • Browser compatibility fixes

    Browser compatibility fixes

    This PR contains various browser compatibility fixes.

    Browsers tested:

    • Latest Chrome on Linux
    • Latest Chrome on Android
    • Chrome 30 on Android
    • Latest Firefox on Linux
    • Latest Edge on Windows
    • IE 11 on Windows
    • IE 11 on Windows Phone
    • Latest Safari on iPhone

    Features tested:

    • Inserting only letters
    • Inserting only numbers
    • Inserting only letters on part of field, inserting only number on other part of same field
    • Having a prefix
    • Backspace
    • Set value using .value with vanilla js
    • Paste (for IE11 see https://github.com/niksmr/vue-masked-input/pull/45)
    opened by rinu 0
  • Can not input phone on android

    Can not input phone on android

    i try add autocomplete="off" but it doesnt work too but when i add this in chrome devtools (with plugged android device) it works!!

    solution is add autocomplete="off" on focus and remove it on blur

    opened by shrue348 0
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
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
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
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
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
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
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 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

Jose Quintana 14 Jul 24, 2022
A versetile tag input component built with Vue 3 Composition API

A versetile tag input component built with Vue 3 Composition API

Mayank 11 Jun 9, 2022
Split Input Component for Vue 3.x

Split Input Component for Vue 3.x Used for otps, transaction pin, passwords etc Install NPM npm i vue-split-input --save Yarn yarn add vue-split-inpu

Anjorin Damilare 6 Aug 8, 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
Yet another Vue component for input masking

vue-input-mask Yet another Vue component for input masking. Based on react-input-mask. Demo Install yarn add vue-input-mask or npm i -S vue-input-mask

null 18 Jun 15, 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
base on vue2.0+ verification code input component. (基于Vue2.0+的移动端验证码输入组件)

vue-input-code 基于Vue2.0+的移动端验证码输入组件. 功能预览 输入时回调 结果回调 自定义错误处理 自定义验证码个数 样式可控 这里是可爱的Demo 支持 支持 Vue.js 2.0+. 安装和使用 npm install vue-input-code --save 作为全局组

Obeta 66 Jan 10, 2022
A tags input component for VueJS

A tags input component for VueJS

Vojtěch Laňka 0 Apr 20, 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
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
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