Closed alexsandro-xpt closed 7 years ago
We do not support dynamic mask in Awesome Mask, we have removed this feature.
Here at Moip we are using two inputs with v-if instead of one with dynamic mask.
We think that change the mask on the fly is not good to UX.
https://github.com/moip/awesome-mask/commit/0f4f1ddc68914ccfa59c8f1f33974fa6590ef899
We are also having problems to support the Samsung predict keyboard with dynamic mask.
Hi man, Could you give me an example about how do you use these two inputs with v-if instead of a dynamic mask? @iCaio
+1
<button @click="select('cpf')">CPF</button>
<button @click="select('cnpj')">Cnpj</button>
<input type="text" v-show="isCpf" v-mask="'999.999.999-99'" >
<input type="text" v-show="!isCpf" v-mask="'99.999.999/9999-99'" >
@JoohnCruz @alexsandro-xpt
@iCaio it's not a better example. A better exemple is with brazilian phones when thoses may have the optional 9 number front of others number.
@alexsandro-xpt We use two fields, our designers makes the design with this limitation in mind.
@iCaio I'm not right about that...
I am using as of below:
<input mask="telefoneMask">
computed: {
// Define máscara do número do telefone
telefoneMask() {
return this.telefone.tipo_telefone_id == 1 ? '(99) 999 99-9999' : '(99) 9999-9999';
}
},
Hope it helps!
@evertramos What is the range types of this.telefone.tipo_telefone_id
? Type 1 for Brazil? Type 2 for others?
@alexsandro-xpt this.tleefone.tipo_telefone_id
type 1 it´s like mobile phone number format and the rest would be home phone number format (brazilian's format).
I have this fullfilled in database with phone type (mobile, home, work and other)... it´s a combobox in the UI.
@evertramos Alright, but We know, that only fix home number is 8 chars, and work phone or commercial phone can be a dynamics 8 or 9 chars.
And now, this is a problem.
@alexsandro-xpt I see what you mean... not sure if length
would work on that... sorry not being able to help.
@evertramos Vanilla Mask has dynamic mask https://github.com/vanilla-masker/vanilla-masker#dynamic-mask here is sample for brasilian phone numbers.
@alexsandro-xpt also awesome-mask since 31March https://github.com/moip/awesome-mask/releases/tag/0.4.2
@caioincau and @joohncruz I fix this issue removing set maxlength
attribute at those lines:
And creating this method at my component for @input="numberInput"
input event:
numberInput (ev) {
this.$v.number.$touch();
if (ev.length > 14) {
this.fields.number.mask = '(99) 99999-9999';
} else {
this.fields.number.mask = '(99) 9999-9999';
}
}
@alexsandro-xpt the maxlength is needed to work well in Samsung Internet with Samsung Prediction keyboard.
@alexsandro-xpt also awesome-mask since 31March https://github.com/moip/awesome-mask/releases/tag/0.4.2
Can you give me an example of use?
We wanted people to be able to input mobile phones or home phones on the same input since we had tested previously that multiple fields or a button to choose what kind of phone input had worse conversion rates.
This is our workaround using this library:
computed: {
phone: {
set(value) {
this.rawPhone = value
if (value.length === 14) {
this.rawMask = '(99) 9999-99999'
} else if (value.length > 14) {
this.rawMask = '(99) 99999-9999'
} else {
this.rawMask = '(99) 9999-9999'
}
},
get() {
return this.rawPhone
}
}
}
Looking for dynamic brazilian phone like http://codepen.io/lagden/pen/meemqG as mentioned at https://github.com/BankFacil/vanilla-masker
How can I configure this with VueJS directive?