Masked Input Vue Component

Masked Input Vue Component

An input mask component for Vue.js, based on the inputmask-core library.

vue-maskedinput

npm npm CircleCI

A Vue component for <input> masking, built on top of inputmask-core.

Demo

Install

yarn add vue-maskedinput

CDN: UNPKG | jsDelivr (available as window.MaskedInput)

Usage

<template>
  <masked-input pattern="11/1111" placeholder="11/1111"></masked-input>
</template>

<script>
import MaskedInput from 'vue-maskedinput'

export default {
  components: {
    MaskedInput
  }
}
</script>

Props

mask : string

The masking pattern to be applied to the <input>.

formatCharacters: Object

Customised format character definitions for use in the pattern.

placeholderChar: string

Customised placeholder character used to fill in editable parts of the pattern.

placeholder : string

A default placeholder will be generated from the mask's pattern, but you can pass a placeholder prop to provide your own.

value : string

A default value for the mask.

hideUnderline : Boolean

A boolean to hide placeholder's underline

See the inputmask-core docs for details.

License

MIT © luyilin

Github Repository

Tags: #VueJs