Masked Input Fields

Edit in →
Survey Creator

Your form may contain text fields whose values should have a specific format. To ensure that users enter values correctly, you can add input masks to these form fields. This demo shows how to specify different input mask types. Switch between available JavaScript frameworks to view a dedicated demo version of input masking for jQuery, React, Angular, Vue.js, or Knockout. Read more...

Themes
Color palette
Question appearance
Sorry, we can't retrieve the data from server. Please comeback later.

Your form may contain text fields whose values should have a specific format. To ensure that users enter values correctly, you can add input masks to these form fields. This demo shows how to specify different input mask types. Switch between available JavaScript frameworks to view a dedicated demo version of input masking for jQuery, React, Angular, Vue.js, or Knockout.

You can add input masks to Single-Line Input questions and Multi-Select Matrix questions with cells of the "text" cellType. To configure an input mask, specify the question's maskType and maskSettings properties. Supported mask types are listed in the table below. Each mask type has a corresponding class whose properties you can specify in the maskSettings object.

maskType Class
"numeric" InputMaskNumeric
"currency" InputMaskCurrency
"datetime" InputMaskDateTime
"pattern" InputMaskPattern

Numeric Input Mask

A numeric input mask allows you to set minimum and maximum limits on a numeric value (the min and max properties), specify value precision if the value is a fractional number, and define symbols to use as a decimalSeparator and a thousandsSeparator:

const surveyJson = {
  "elements": [{
    "name": "number"
    "type": "text",
    "maskType": "numeric",
    "maskSettings": {
      "min": 0,
      "max": 100,
      "precision": 1,
      "decimalSeparator": ",",
      "thousandsSeparator": "."
    }
  }]
}

Currency Input Mask

A currency input mask provides the same capabilities as a numeric input mask, plus it allows you to add a prefix and/or a suffix to the value:

const surveyJson = {
  "elements": [{
    "name": "currency"
    "type": "text",
    "maskType": "currency",
    "maskSettings": {
      "min": 0,
      "max": 100,
      "precision": 1,
      "prefix": "$",
      "suffix": " USD"
    }
  }]
}

Date and Time Input Mask

A date and time input mask specifies a pattern for a date time value. This pattern can include separator characters and placeholders that designate date components (month, day, year, etc.). Refer to the pattern property description for a full list of supported placeholders. Optionally, you can limit the date range using the min and max properties:

const surveyJson = {
  "elements": [{
    "name": "date"
    "type": "text",
    "maskType": "datetime",
    "maskSettings": {
      "pattern": "mm/dd/yyyy",
      "min": "2024-03-01",
      "max": "2024-04-01"
    }
  }]
}

Pattern Input Mask

A pattern input masks allows you to set a custom value format (phone number, email address, credit card number, etc.). Within the pattern, you can use 9 for a digit, a for a letter, # for a digit or a letter, and \ to escape a character:

const surveyJson = {
  "elements": [{
    "name": "phone"
    "type": "text",
    "maskType": "pattern",
    "maskSettings": {
      "pattern": "+9(999)-999-99-99"
    }
  }]
}

You can also use the maskSettings.patternDefinitions object in global settings to define your own placeholder symbols and map them to custom regular expressions.

Store Masked Value in Survey Results

If you want to save the question value with an applied input mask, enable the question's saveMaskedValue property within the maskSettings object:

const surveyJson = {
  "elements": [{
    "name": "masked-field"
    "type": "text",
    "maskType": "numeric", // or "currency" | "datetime" | "pattern"
    "maskSettings": {
      // ...
      "saveMaskedValue": true
    }
  }]
}

Your cookie settings

We use cookies on our site to make your browsing experience more convenient and personal. In some cases, they are essential to making the site work properly. By clicking "Accept All", you consent to the use of all cookies in accordance with our Terms of Use & Privacy Statement. However, you may visit "Cookie settings" to provide a controlled consent.

Your renewal subscription expires soon.

Since the license is perpetual, you will still have permanent access to the product versions released within the first 12 month of the original purchase date.

If you wish to continue receiving technical support from our Help Desk specialists and maintain access to the latest product updates, make sure to renew your subscription by clicking the "Renew" button below.

Your renewal subscription has expired.

Since the license is perpetual, you will still have permanent access to the product versions released within the first 12 month of the original purchase date.

If you wish to continue receiving technical support from our Help Desk specialists and maintain access to the latest product updates, make sure to renew your subscription by clicking the "Renew" button below.