probil / v-mask

🔡 Tiny input mask library for Vue.js (directive)

Home Page:https://v-mask-demo.netlify.com

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

How to use v-mask with nativescript

vova-kondrashov opened this issue · comments

v-mask version
2.1.0

vue version
2.6.11

The problem
How to use v-mask with nativescript?

@vova-kondrashov 👋

It wasn't considered to be running in "other-then-web" environment. The library itself is pretty simple, so it should be possible to make it work in nativescript, I just don't have enough experience with NS to do that.

Anyway PR is welcome if anyone is willing to curry this out

@vova-kondrashov, now i use filter from vue-mask in onTextChange handler

onTextChange({ value }) {
  if (!this.mask) return this.$emit('input', value);

  const masked = VueMaskFilter(value || '', this.mask);

  if (value !== masked && global.isAndroid) {
    // textField is <TextField/> component
    const textField = this.$refs.textField.nativeView;

    // Android fix for move cursor to end
    this.$nextTick(() => {
      this.$nextTick(() => {
        textField.android.setSelection(textField.text.length);
      });
    });
  }

  this.$emit('input', masked);
},

@Kolobok12309 What is receiving the @input event? Can you include more of your code in your answer like your <TextField> input or any other related functions?

I'm not sure what do do with the masked value once I have it.

<TextField v-model="phone" @textChange="onTextChange"></TextField>

In my situation if I set this.phone to masked then the @onTextChange event fires again and I get double input. Ex: I'll press "123" once but get this.phone gets set to "11223".