cleaveNums - Format numeric entries on-the-fly

The cleaveNums function uses cleave.js to automatically format numeric fields with thousand separators, decimals, currency symbols, etc. in text entry (single or form), matrix, side-by-side or MC questions. It is NOT for use with constant sum or matrix constant sum questions (there is a different function for that).

This function is available for a reasonable fee. Contact TomG on the Qualtrics Community to learn more.

Set-up Instructions

Survey Header

Load cleave.js

<script src="https://cdn.jsdelivr.net/npm/cleave.js@1/dist/cleave.min.js"></script>

cleaveNums function

To make the function available to all questions in the survey, copy the function to the Survey Header inside a script tag: Add the cleaveNums function to the survey header to make it available to any question in the survey. Go to Look & Feel → General → Header edit → and paste the provided cleaveNums function JS:

<script>/*Paste cleaveNums function JS here*/</script>

Alternatively, paste the cleaveNums function JS into a question's JS outside the existing Qualtrics functions to make it available to questions on the page.

Question JavaScript

Add JS to call the cleaveNums function to apply it to the the question as follows:

Qualtrics.SurveyEngine.addOnload(function() {
	cleaveNums(this);
});

To override default options, add an object containing the options to the function call. For example:

Qualtrics.SurveyEngine.addOnload(function() {
	cleaveNums(this,{cleaveparms:{prefix:"$"},placeholder:"$0"});
});

Options

align

align specifies the alignment of the number within the text entry box. Possible value are "left", "right", and "center".

Default: "right"

cleaveparms

cleaveparms is an object that specifies the cleave parameters. See cleave.js for more details.

cleaveparm: delimiter

The thousands separator as a string.

Default ","

cleaveparm: prefix

The number prefix as a string, such as a currency symbol.

Default: "" (none)

cleavparm: noImmediatePrefix

Boolean to not show prefix until a number is entered.

Default: true

cleaveparm: numeralIntegerScale

The maximum number of digits allowed before the decimal.

Default: 10

cleaveparm: numeralDecimalScale

The maximum number of decimal places allowed.

Default: 0

cleaveparm: numeralDecimalMark

The decimal symbol as a string.

Default: "."

cleaveparm: numeralPositiveOnly

Boolean to allow positive numbers only.

Default: true

cleaveparm: stripLeadingZeros

Boolean to strip leading zeros from numbers.

Default:true

fixedDecimal

Boolean to record number with a fixed number of decimal places. Number of decimal places matches numeralDecimalScale.

Default: false

hideOnSubmit

Boolean to hide the text input boxes on submit so the respondent doesn't see the raw values flash.

Default: false

placeholder

The placeholder text for the input boxes.

Default: ""

selector

CSS style selector for input boxes to format. If empty, all input boxes are formatted.

Default: "" (empty)

width

The width of the input boxes. If empty, the question's default width is used.