VueJS Generators
GitHubNPMJSFiddleCodePen
develop
develop
  • Getting Started
  • Installation
  • Usage
    • Styling
  • Component
    • Schema
    • Model
    • Options
    • Events
  • Fields
    • Field Properties
      • Inside Buttons
    • Core Fields
      • checkbox
      • checklist
      • input
      • label
      • radios
      • select
      • submit
      • textArea
    • Optional Fields
      • cleave
      • dateTimePicker
      • googleAddress
      • image
      • masked
      • noUiSlider
      • pikaday
      • selectEx
      • rangeSlider
      • spectrum
      • staticMap
      • switch
      • vueMultiSelect
    • Custom Fields
  • Groups
  • Validation
    • Built in Validators
    • Custom Validators
    • Handling Validation Events
Powered by GitBook
On this page
  • Masked input field
  • Special properties of field
  • Usage

Was this helpful?

  1. Fields
  2. Optional Fields

masked

PreviousimageNextnoUiSlider

Last updated 6 years ago

Was this helpful?

[danger] DEPRECATION WARNING

The Masked Input Plugin this component is based on is no longer in active development. This field will be removed in v3.

Masked input field

This is a masked input field for formatted string values. (e.g. phone number, zip code, card numbers...etc)

Please note, this field depend on the following library:

Special properties of field

Property

Default

Accepted values

Description

autocomplete

none

Indicates whether the value of the control can be automatically completed by the browser.

mask

none

String

Mask for input field (E.g. (99) 999-9999)

maskOptions

none

Object

placeholder

none

String

Placeholder text for input field

readonly

false

Boolean

If true, the input field is read only

maskOptions

@TODO

Usage

Phone number masked field

{
    type: "masked",
    label: "Mobile phone",
    model: "mobile",
    mask: "(99) 999-9999"
}

Date masked field

{
    type: "masked",
    label: "Date",
    model: "date",
    mask: "99/99/9999",
    maskOptions: {
      placeholder: "mm/dd/yyyy"
    }
}

Settings to masked component.

jQuery
maskedinput
see doc
Read more info from options