wirecardBrasil / awesome-mask

The awesome-mask runs with Vue.js and uses the vanilla-masker to make your form awesome with masks.
MIT License
165 stars 22 forks source link

How to setup dynamic mask? #4

Closed alexsandro-xpt closed 7 years ago

alexsandro-xpt commented 7 years ago

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?

caioincau commented 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.

joohncruz commented 7 years ago

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

alexsandro-xpt commented 7 years ago

+1

caioincau commented 7 years ago
<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

captura de tela 2017-03-13 as 16 14 29
alexsandro-xpt commented 7 years ago

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

caioincau commented 7 years ago

@alexsandro-xpt We use two fields, our designers makes the design with this limitation in mind.

alexsandro-xpt commented 7 years ago

@iCaio I'm not right about that...

evertramos commented 7 years ago

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!

alexsandro-xpt commented 7 years ago

@evertramos What is the range types of this.telefone.tipo_telefone_id ? Type 1 for Brazil? Type 2 for others?

evertramos commented 7 years ago

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

alexsandro-xpt commented 7 years ago

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

evertramos commented 7 years ago

@alexsandro-xpt I see what you mean... not sure if length would work on that... sorry not being able to help.

alexsandro-xpt commented 7 years ago

@evertramos Vanilla Mask has dynamic mask https://github.com/vanilla-masker/vanilla-masker#dynamic-mask here is sample for brasilian phone numbers.

caioincau commented 7 years ago

@alexsandro-xpt also awesome-mask since 31March https://github.com/moip/awesome-mask/releases/tag/0.4.2

alexsandro-xpt commented 6 years ago

@caioincau and @joohncruz I fix this issue removing set maxlength attribute at those lines:

https://github.com/wirecardBrasil/awesome-mask/blob/fb3de2e8d6dc6154f92da2a1c5995c23f80cfb58/src/index.js#L21-L22

https://github.com/wirecardBrasil/awesome-mask/blob/fb3de2e8d6dc6154f92da2a1c5995c23f80cfb58/src/index.js#L49

https://github.com/wirecardBrasil/awesome-mask/blob/fb3de2e8d6dc6154f92da2a1c5995c23f80cfb58/src/index.js#L57

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';
  }
}
caioincau commented 6 years ago

@alexsandro-xpt the maxlength is needed to work well in Samsung Internet with Samsung Prediction keyboard.

SamXDesc commented 5 years ago

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

kelvne commented 5 years ago

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