SancheZz / vue-mask-number

input with number mask (phone, credit card, etc) for Vue

@yasanchezz/vue-mask-number

This is an input mask which is based on VueJs 3.2+ and requires modern browsers.

Installation

Install npm package npm install @yasanchezz/vue-mask-number --save-dev

Declare dependency in main.js

import MaskNumber from '@yasanchezz/vue-mask-number';
import '@yasanchezz/vue-mask-number/dist/style.css';

createApp(App)
  .use(MaskNumber)
  .mount('#app');

Usage

<template>
  <MaskNumber
    v-model:value="value"
    mask="+47 ### ## ###"
    placeholder="[phone]"
  />
</template>

<style lang="scss" scoped>
.mask-number {
  --mask-padding: 5px 10px;
  --mask-placeholder-color: pink;

  border: 2px solid black;
  border-radius: 4px;
  transition: border-color .1s ease-out;

  /* yeap, input has no styles itself, you have to style it */
  &:focus-within {
    border-color: blue;
  }
}
</style>

props

• enterkeyhint String? - specified which action label to present for the enter key on virtual keyboards;
• placeholder String - placeholder string, which is showing;
• disabled: Boolean? - native attribute;
• required: Boolean? - native attribute;
• readonly: Boolean? - native attribute;
• mask String - mask with # character, for example, +47 ### ## ###;
• value String - passed value;

Usage as Ref

You can use inner elements:

• element HTMLDivElement - component container
• control HTMLInputElement - control itself. You can use a control to handle events, e.g. invalid.

import { ref, watch } from 'vue'
import { type MaskNumberRef } from '@yasanchezz/vue-mask-number'

const mask = ref<MaskNumberRef | null> = ref(null);

watch(
  () => mask.value?.control,
  (newContor, oldControl) => {
    newContor?.addEventListener('invalid', handleInvalid)
    oldControl?.removeEventListener('invalid', handleInvalid)
  }
)

and you have to define the ref attribute

<template>
  <MaskNumber
    ref="mask"
  />
</template>