Masked Input Fields

Edit in →

Your form may contain fields whose values should have a specific format. To ensure that users enter values correctly, you can add input masks to these form fields. Users can click a masked input field or hover the mouse pointer over it to view the expected value format. 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 fields whose values should have a specific format. To ensure that users enter values correctly, you can add input masks to these form fields. Users can click a masked input field or hover the mouse pointer over it to view the expected value format. 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.

Reference Sources

SurveyJS uses a third-party Robin Herbots Inputmask plugin for masking input fields. Reference the plugin's script on your page. You should also reference a script that integrates the SurveyJS Form Library with third-party libraries (surveyjs-widgets.js). Open the HTML tab and copy the links from there.

Configure Input Masks

You can add input masks to Text and Multiple Text questions. To specify the input mask type, use the inputMask property. SurveyJS supports the following mask types:

  • "datetime"
    A date and time mask type. The default mask is "yyyy-mm-dd'T'HH:MM:ss". Use the inputFormat property to change it.

  • "currency"
    A currency mask type. Use the prefix and suffix properties to add currency symbols before or after the value. You can also set the numericDigits property to change the allowed number of decimal digits (default value: 2).

  • "decimal"
    A decimal number mask type.

  • "phone"
    A phone number mask type. Use the inputFormat property to specify the mask.

  • "ip"
    An IP address mask type.

  • "email"
    An e-mail address mask type.

You can also specify a custom input mask that does not belong to any of the listed types. To do this, omit the inputMask property and assign the custom mask to the inputFormat property.

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.