niksmr/vue-masked-input

Masked input component for Vue.js

vue-masked-input's Issues

Exception Swallowing in MaskedInput.js

In https://github.com/niksmr/vue-masked-input/blob/master/src/MaskedInput.js the exception is swallowed so user is not aware of why "Error" is shown as input value.

Here is the code in question:

Suggested fixes:

• Log ex to console.
• Instead of Error in Input show ex instead

Change the placeholder char

Hi, i try to use this component and it awsome.

now i need to do something in addition and i want to know if there is easy way to do it.

I need to replace the placeholder char with something that is more then 1 char.

the component before focus:

after focus:

while texting:

how can i replace the single placeholderChar '_' with this string dd/mm/yyyy

Cannot set property 'value' of undefined

Nuxt project

When I focus to vue-masked-input and close overlay appears error like this:

IP addresses

I want to make it more flexible which accept following format

10.2.5.6 instead of 010.002.005.006 555.555.555.555

tab in firefox

Navigating to next control with tab key doesn't work in Firefox.

Still this repo alive ?

Backspace doesn´t work in Android

Hi,

When you type some text and you want to correct with the backspace key in Android, it doesn´t make anything.
You can´t clear the text neither.

Android 7.0 with Chrome 57.0.2987.132

Best regards.

Disable placeholderChar by default

Hi! I want to disable placeholderChar or set it to empty string, but it's impossible because props validation require value.length === 1. I think placeholder chars are optional. Previously I use jquery plugin for masked input, and it doesn't set placeholder by default.

Create a *d.ts file

Create a vue-masked-input.d.ts file

@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.

IE 11 support

Guys, is ie 11 supported? When I use phone mask it outputs ERROR string instead of mask in ie11

Could I use in Element UI?

Add event handlers to this Plugin

I am trying to add keyup event on this masked input, but it seems it doesn't work.

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?

Tab key not working to move focus

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

SyntaxError: Unexpected token import when using in Jest tests

If vue-masked-input is used inside a component tested by Jest I get following error:

 FAIL  test/unit/specs/PhoneEntry.spec.js
  ● Test suite failed to run

    /Users/artem/my-project/node_modules/vue-masked-input/dist/maskedInput.js:3
    import InputMask from 'inputmask-core';
    ^^^^^^

    SyntaxError: Unexpected token import

This happens because dist/maskedInput.js bundle is using import constructs shamelessly - this should be eliminated by Babel. Some Webpack envs handle this, some not, but Jest never.

Create/Allow for :class declaration for the input

Please allow a way to pass on a Css class (:class?) down to the input field, so it can be styled with the UI.

Cannot import from node_modules in a Vue 2.4.1 project

After installing your module using npm, i tried to import It like the example page says, and gulp throws error:

'import' and 'export' may appear only with 'sourceType: module'

It seems your module is malformed. I had to copy the MaskedInput.js code into my project and install Its dependency to make It work properly, but It looses the link to your npm project.

Using babelify + browserify + vueify combo with Vuejs 2.4.1

If you have any questions about this problem, lemme know. I'll gladly to help.

You can add a judgment in the file and use it in the server-side SSR rendering

import ffpoly from './ff-polyfill'; // Firefox Polyfill for focus events

if (process.BROWSER_BUILD) {
ffpoly();

}

How to add conditional input?

How to add conditional input, like

1111?1 A 1111

Problem with mask

So i have

{{ phone }}
		<label for="phone">Phone</label>
		<masked-input
			id="phone"
			class="form-control string"
			v-model="phone"
			mask="\+\7 111 111-11-11"
			placeholder=""
			type="tel" />
	</div>

And i have phone: '72731241241',
Every time i open this modal i will get [phone]
Next try [phone]
And next [phone]
And next [phone]...

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

custom regex support for mask option

please, add custom regex support for mask option
smth like
<masked-input mask="a{10}" placeholder-char="*"/>

instead of

<masked-input mask="aaaaaaaaaa" placeholder-char="*"/>

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

How do I test the input event?

Don't really think this is a bug, but I could use some help here. I'm writing a very simple PhoneNumberField.vue component:

<template>
    <masked-input
        v-model="number"
        type="tel"
        pattern="\d*"
        mask="[phone]"
        @input="updateValue()">
    </masked-input>
<template>
    
<script>
    export defaults {
        props: {
            value: String
        },
        data() {
            return {
                number: this.value || '',
            }
        }, 
        methods: {
            updateValue() {
                this.$emit('input', this.number);
            },
        },   
    }
</script>

I can use my PhoneNumberField like this:

<phone-number-field v-model="mobilePhoneNumber"></phone-number-field>

So far, so good -- the binding works correctly and mobilePhoneNumber is updated in the parent when I edit the field. The problem is in testing it. I want to set the value and verify that the input event was emitted:

let originalNumber = '[phone]';
let newNumber = '[phone]';
let wrapper = mount(PhoneNumberField, { propsData: { value: oldNumber } });
let input = wrapper.find('input')
input.element.value = newNumber;
input.trigger('input')
expect(wrapper.emitted()['input'][0][0]).to.equal(newNumber)

This does not work; wrapper.emitted() is empty. If I replace the <masked-input> with a regular <input> element (without the mask, obviously), my test works as expected and wrapper.emitted() contains the expected event.

What am I doing wrong here?

min/max Values

Hi,

great Component so far, very slim 👍

But is there a Way to allow min/max Values? For Example i want a mask where the User can type the Amount of Money.

e.g

<masked-input class="form-control"
                           mask="11 , 11"
                           placeholder="0,00"
                           @input="form.amount = arguments[1]"
/>

Now the Problem is, the User can only type 10 to 99. But what if he wants to write 1000. This is now gonna work. So is there a Way to allow min/max Values so the User can type 10 or 1000?

AutoFill does not work on iPhone 6s (possibly others)

If a user selects an option from AutoFill, their input is ignored and the field is left empty.

To reproduce: visit the live demo page on safari on an iPhone 6s. The phone input is correctly identified as a phone number input, and AutoFill will suggest phone numbers to fill in. Selecting one to fill is ignored and the field is left blank.

v-on:change does not fire

v-on:change="onChanged($event)" for example does not fire

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"

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

Autocomplete not filling

https://drive.google.com/file/d/1owVUG31IF4vP2TMcIPe9dHdjb7EEF-97/view

Autocomplete is not filling the input.

Tab navigation not working in Firefox

Tab navigation not working in Firefox Nightly 55 when input is filled. All others inputs works fine.

Code example here:

<masked-input mask="\+\7 [phone]" required />

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

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.

min/max character/digit length on input

Thanks for this awesome component!

I think it will be greater if this component can handle min/max character/digit length and not showing placeholder-char,
for example in my country handphone number has many variant of length, maximum is 12 and minimum I think was 9/10.

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 :)

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 [phone]', '[phone]']"
>

Seems like it don't read arrays

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" />

Changing the object doesn't update the input

Updating the object passed by v-model, the masked input stills empty.

Failed to resolve directive: mask

Trouble with runtime-only vue version

It falls because you use string template in component.

Issue with Vuex on strict mode

If I turn on strict mode on vuex, I get the following error
[vuex] Do not mutate vuex store state outside mutation handlers.

I think that is something related to the v-model approach

When using Vuex in strict mode, it could be a bit tricky to use v-model on a piece of state that belongs to Vuex

https://vuex.vuejs.org/guide/forms.html

Property or method "rawVal" is not defined

hi, that is code
<masked-input mask="\+\1 (111) 1111-11" placeholder="Phone" @input="rawVal = arguments[1]" />
that is warning in console

[Vue warn]: Property or method "rawVal" is not defined on the instance but referenced during render. Make sure to declare reactive data properties in the data option.

and in request will sending not raw phone, but '[phone]' format

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 [phone]" 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 ] } }

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

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'
}

Simple, pre-complied copy

Would it be possible to get a browser ready copy that I can just call to the front end?

Placeholders overlapping in Safari

Intput's placeholder and mask placeholder are overlapping each other in Safari (OS X)
http://take.ms/Vgnbb