v-mask icon indicating copy to clipboard operation
v-mask copied to clipboard

How to use v-mask with nativescript

Open vova-kondrashov opened this issue 5 years ago • 3 comments

v-mask version 2.1.0

vue version 2.6.11

The problem How to use v-mask with nativescript?

vova-kondrashov avatar May 28 '20 04:05 vova-kondrashov

@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

probil avatar Jun 02 '20 08:06 probil

@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 avatar Mar 29 '21 21:03 Kolobok12309

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

jarrodwhitley avatar Dec 08 '23 20:12 jarrodwhitley