Masked Input Fields
Survey.StylesManager.applyTheme("defaultV2");
var json = {
"elements": [
{
"name": "date",
"type": "text",
"title": "Date:",
"inputMask": "datetime",
"inputFormat": "mm/dd/yyyy"
},
{
"name": "currency",
"type": "text",
"title": "Currency:",
"inputMask": "currency",
"prefix": "$",
"numericDigits": 2,
"startWithNewLine": false
},
{
"name": "decimal",
"type": "text",
"title": "Decimal:",
"inputMask": "decimal"
},
{
"name": "phone",
"type": "text",
"title": "Phone:",
"inputMask": "phone",
"inputFormat": "+9(999)-999-99-99",
"startWithNewLine": false
},
{
"name": "ip",
"type": "text",
"title": "IP address:",
"inputMask": "ip"
},
{
"name": "email",
"type": "text",
"title": "Email address:",
"inputMask": "email",
"startWithNewLine": false
}, {
"name": "creditcard",
"type": "text",
"title": "Custom format",
"description": "Enter a credit card number",
"inputFormat": "9999 9999 9999 9999"
}
],
"showQuestionNumbers": false,
"questionTitleLocation": "left"
};
window.survey = new Survey.Model(json);
survey.onComplete.add(function(sender) {
document.querySelector('#surveyResult').textContent =
"Result JSON:\n" + JSON.stringify(sender.data, null, 3);
});
ReactDOM.render(
<SurveyReact.Survey model={survey} />, document.getElementById("surveyElement"));
<!DOCTYPE html>
<html lang="en">
<head>
<title>Masking Input Fields, Reactjs Example | Form Builder Library</title>
<meta name="viewport" content="width=device-width" />
<script src="https://unpkg.com/jquery"></script>
<script src="https://unpkg.com/react@17.0.1/umd/react.production.min.js"></script>
<script src="https://unpkg.com/react-dom@17.0.1/umd/react-dom.production.min.js"></script>
<script src="https://unpkg.com/@babel/standalone@7.2.5/babel.min.js"></script>
<script src="/DevBuilds/survey-core/survey.core.min.js"></script>
<script src="/DevBuilds/survey-core/survey.i18n.min.js"></script>
<script src="/DevBuilds/survey-react-ui/survey-react-ui.min.js"></script>
<link href="/DevBuilds/survey-core/defaultV2.min.css" type="text/css" rel="stylesheet" />
<link rel="stylesheet" href="./index.css">
<script src="https://unpkg.com/inputmask@5.0.3/dist/inputmask.js"></script>
<script src="/DevBuilds/surveyjs-widgets/surveyjs-widgets.min.js"></script>
</head>
<body style="margin: 0">
<div id="surveyElement" style="display:inline-block;width:100%;">
</div>
<div id="surveyResult"></div>
<script type="text/babel" src="./index.js"></script>
</body>
</html>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 jQuery 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 theinputFormatproperty to change it."currency"
A currency mask type. Use theprefixandsuffixproperties to add currency symbols before or after the value. You can also set thenumberDigitsproperty to change the allowed number of decimal digits (default value: 2)."decimal"
A decimal number mask type."phone"
A phone number mask type. Use theinputFormatproperty 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.