probil / v-mask Goto Github PK

Cannot pre-populate the input field where the mask is being used.
Also does not work while trying to set the model value for the mask.

When using a phone mask like that;
v-mask="'(##) #####-####'"
It first input key is not recognized.

Hello,

Is this work with v-model ?
I can't make it work with simple input with v-model:

<input type="text" v-model="someModel" v-mask="'####-##'">

Thanks

Changing the approach to how this directive is implemented may make it work better with custom input components.

Rather than reply on the v-model (and firing input events, which may not always be the event used in a custom component), binding to the elements native input event, grabbing the current value via evt.target.value and formatting it, then setting the value via evt.target.valuemight make this directive more robust.

One can check if they are on a custom component by checking if el has the el.__vue__ property, and if so, then trigger the 'vue' input event el.__vue__.$emit('input', evt.target.value).

Adding a modifier to the direction to set which event is fired would be good as well (i.e. input or change)

Why is there not a precompiled version?

Hello. I use your awesome plugin with Nuxt.js project and see simple blink mask after input any symbols.

If I watch on Safari (os x 10.11) or Opera/Chrome — all WebKit browsers working fine with v-mask plugin.

How to fix it?

You can replicate this issue easily by going to your demo at https://cdn.rawgit.com/probil/v-mask/vue-2.0/demo/index.html.

In the first input type the following keystrokes: 1, 2, 3.

Now backspace twice to where only '12' is left.

If you type 3 again, the keystroke is lost (transformed into a /).

Is possible use the plugin in another tag, for example,

<p>, <td>, <dd>

...thank you

Hi, using jquery mask on my old projects I was able to do something like this:
$(".phone").mask("(99) 9999-9999?9");
With an optional number using the question mark "?", how to do it using v-mask?
Thanks

Rather than having v-mask="'### ###-####'" for example for a phone multiple times it should support :v-mask="getMask('phone')" so the actual mask can be changed in one place :)

Here's my component:

<template>
<input :v-mask="adrMask">
</template>

<script>
export default {
  name: 'awesome-input'
  props: ['adrMask']
}
</script>

In another Component:

<template>
<awesome-input adr-mask="###.###.###.###,##"></awesome-input>
</template>

Am I doing something wrong?

When using the the optional '?' character, a question mark shows up in the output.

USE CASE:
'##/##/##?##'
To allow for: 05/05/95 and 05/05/1995

Input:
05/05/1995

Expected Result:
05/05/1995

Actual Result:
05/05/19?95

<input v-if="show" type="text" v-mask="'+7 (###) ###-##-##'">
this.show = true and mask not working (

ex: ###-###-###?AA

match:
123-123-132AA
and
123-123-123aa

But: ###-###-###aa

match:
123-123-123aa only

It does not work in IE9 and IE10.

Hello to all

I receive an object from my VUEX store, if i clone that object (in different method, JSON.parse / stringify or lodash / underscore clone function), the mask not apply.

If i remove the clone function OR the JSON.parse() / stringify() from the code, the mask works very well, but this break all my application data, because modify without a mutation.

Anyone have a solution for this ?

Thanks

computed: {
    user () {
      // let user = JSON.parse(JSON.stringify(this.$store.getters.getUser))
      let user = clone(this.$store.getters.getUser)
      if (user.gender) {
        this.gender = user.gender
      }
      return user
    },
    address () {
      return JSON.parse(JSON.stringify(this.$store.getters.getAddress))
    }
  }

Problem GIF image

i want change dynamically a mask. But don`t works

I don't know what you changed, but after the update from 1.1.0 to 1.2.0 i can't active the mask as a component prop.

The example below was working good in the last version, but not now.

Input.vue

<template>
    <input type="text" class="form-control" @keyup="update" v-mask="mask">
</template>

<script>
    export default {
      props: {
        mask: String
      }
    }
</script>

Form.vue

<template>
    <form action="">
      <custom-input mask="#####-###" />
    </form>
</template>

When you focus on the start of the input after the first click on a key, it focuses on the input end

thanks

can I make price mask format like this -

20000034

make this

200.000,34

can I make this ?

Trying a simple mask (##/##) on mobile chrome.

The caret positions itself before the '/' and stays one char behind (entering 1234 actually displays 12/43)

For example Element UI and other input wrappers:

<el-input v-mask="...." />

User can pass any value with Ctrl+V/Cmd+V

index.js missing from /dist on 1.3

Hey. If the field is set to the mask +7 (###) ### - ## - ##, then after +7 it is impossible to enter 7, after +1 it is impossible to enter 1 and so on

not work

<md-input v-model='form.client.cpf' required v-mask="'###.###.###-##'"></md-input>

the field is: "#1"

work

<md-input v-model='form.client.cpf' required v-mask="'/###.###.###-##'"></md-input>

the field is: "/123.123.123.12"

<md-input v-model='form.client.cpf' required v-mask="'-###.###.###-##'"></md-input>

the field is: "-123.123.123.12"

<md-input v-model='form.client.cpf' required v-mask="'(###.###.###-##'"></md-input>

the field is: "(123.123.123.12"

Work with blank space too

for example i have mask ####-## when i have 9999-99 in my input and press for example '1' dom value doesnt change but model value does: 9999-991
my system: [email protected] win7 chrome56

hello there!
this line not working
<td><input type="text" v-mask="'##:##'" v-model="day.start1" class="form-control small"/></td> not working

On every place I use v-mask, every change that i have on the text throws an 'Event is not a constructor' error.

It works normally and the way expected, but keeps throwing this error. Anyone knows what could be?

1. Field is blank - IS NOT possible to paste any value, which is the desired behavior.
2. Field value length < mask.length - IS NOT possible to paste any value, which is the desired behavior.
3. Field value length === mask length - IS possible to paste any value, which is not desired.

In step 2, when pasting any value, the field is cleared

To test the case 3, you must select all field value and press ctrl+v.

Please, in the same exemple, if you hold a character and change the focus with tab, and hit another character, a misterious character appears breaking the mask.

Thanks

Hi.

I've started to use your library recently. And unfortunately faced a problem with "Cannot read property 'length' of undefined" for previousValue in updateValue method.
I suppose, that problem appears when some component values are set in the beforeMount method.

I've tried to fix this problem.

Thank you

I testing this in mobile chrome (android) latest version.
if i type digits from 1 till 0 in mask (999) 999-9999, then result will be (234) 789-0 (in your demo)
it seems that symbols '(', ')', ' ', '-' in the mask dont count when entering numbers

Hello,

I used version 0.1.0 with no problems, but now I'm writing an application with vue 2.0,
and v-mask version 1.0.1 doesn't work properly, for example for '###':

I type 'a':
Input : display a

then I type anything:
Input: remove a, and display nothing

then I type 1:
Input: displays 1, and after that everything is good as always.

In other words, the first character is not being recognized by the directive, and in some way is overwritten by the second one.

Hope you can fix this.

Is there a way to prevent a space being added at the end of an input, specifically on the date masked input.

On the demo page, try adding a date in and a space appears at the end if you type in a date: eg 12/12/1980
https://rawgit.com/probil/v-mask--demo/master/dist/index.html

Hello, could you attached precompiled version (v-mask.min.js), without this whole npm?

for a mask that is something like v-mask="'##h##'" if I press the key 1 continuously the input will be 11h111.
Don't know if it matters but I have a fast repeating rate in my keyboard.

I got a problem with the mask when trying to use something like (##) ####-####
What happens is that when the i type the first char, the mask will ignore cause expect a '(', but the right way is that the mask should skip this.

For masks like +1 ### ### #### it will not allow to write +1 1.
So if you will type 111 in this input, value becomes +1 , and will not change, until you press something except 1

Same for +1(###)-###-#### and +1##########
Used v-mask 1.2.0 and vue 2.2.6

Example: https://jsfiddle.net/ym03cq9r/

Despite of this, same mask on demo page works fine, i assume there are used not latest version of v-mask

<el-input v-mask="...."></el-input>

But not work

Is there any plan on implementing it? :)

If it helps, I do have a filter that does this:

currency (amountInCents) {
amountInCents = amountInCents / 100
amountInCents = amountInCents.toFixed(2)
return 'R$ ' + amountInCents.replace(/\D/g, ',')
}

But, of course, it does not work as a mask for v-model input

Hi, its a way to enable removing chars from input that are in mask? (separating chars like: -, / , _,..)

When I test v-mask on IE10 I get

Unable to set property 'mask' of undefined or null reference

I works in Chrome and Firefox with no issues
I have Polyfill enabled in my application.

I resolved these isues by making the changes below:
Bbasically using getAttribute on elements instead of the dataset notation, which is only supported on IE 11+

 function updateValue(el) {
  var force = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
  var value = el.value,
      //_el$dataset = el.dataset,
      //_el$dataset$previousV = _el$dataset.previousValue,
      _el$dataset$previousV = el.getAttribute('data-previous-value'),
      previousValue = (_el$dataset$previousV === undefined ? "" : _el$dataset$previousV,
      //mask = _el$dataset.mask;
      mask = el.getAttribute('data-mask');


  if (force || value && value !== previousValue && value.length > previousValue.length) {
    el.value = (0, _format2.default)(value, mask);
    (0, _utils.trigger)(el, 'input');
  }

  //el.dataset.previousValue = value;
  el.setAttribute('data-previous-value', value);
}

function updateMask(el, mask) {
  //el.dataset.mask = mask;
  el.setAttribute('data-mask', mask)
} 

@probil I really like this plugin. How do I pull it in via npm for Vue 2? I can't seem to target the branch.

npm install [email protected]

Isn't finding anything.

I have a mask for a US phone number, "(###) ###-####", but the field is also used alternately for an email address, which has no mask. There is a drop-down for communication preference that controls this. When you change preferences, I blank out the field, and set the mask as appropriate. My problem now is that when I programmatically set the mask and blank the field, the text box on-screen says "(". If I manually clear the field, then the input's placeholder text shows like it should, but when I clear it programmatically, I always get a lone Parenthesis, as if the mask is filling that part in for me.

I think it will be better to distribute v-mask as a directive, not as a plugin, so it can be used in components too, like directives: { mask: VueMask }

If someone want to use it on global constructor, it will be available as Vue.directive('mask', VueMask).

So this will be more flexible, but still simple as current Vue.use(VueMask)

Mask does not work. I cannot type more than 2 digits.

My mask is v-mask="'###.###.###-##'"

I type the first char and appear "#", type the second and "#1", type third char and still "#1"

Is there a way to get the raw value without any formatting?

Raw value: 5555555555
Formatted: 555-555-5555

Regards,

How do I make the following mask?
With ',' or '.' Always being in this format 121.12 -> regardless of the size of digits

How do I make a mask that accepts only 0-9 A-Z-, regardless of the position of the '-', ''

thanks

The format for the mask is being lost when the form is submitted and the value is not stored properly. When I go back into the form, the value is not fitting the input mask:

<textbox v-model="FormData.phone" v-mask="'(###) ###-####'">></textbox>

Textbox is a vue component:

<template>
	<input type="text"
		:class="cClass"
		:value="value"
		@input="update"
	/>
</template>
<script>
	export default {
		props: {
			value: null,
			class: {
				type: Object,
				default() {
					return {
						'form-control': true
					};
				}
			}
		},
		computed: {
			cClass() {
				return this.class;
			}
		},
		methods: {
			update(event) {
				this.$emit('input', event.target.value);
			}
		}
	}
</script>