====== 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 (See [[cleavecsm|cleaveCSM]] for that).

This function is available for a reasonable fee. Contact **[[https://community.qualtrics.com/inbox/conversation?with=373|TomG]]** on the Qualtrics Community to learn more.

===== Set-up Instructions =====
==== Survey Header ====
=== Load cleave.js ===
<code>
<script src="https://cdn.jsdelivr.net/npm/cleave.js@1/dist/cleave.min.js"></script>
</code>
=== 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 -> {{::icon_source.jpg?20|}} and paste the provided cleaveNums function JS:
<code>
<script>/*Paste cleaveNums function JS here*/</script>
</code>
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:
<code>
Qualtrics.SurveyEngine.addOnload(function() {
	cleaveNums(this);
});
</code>

To override default options, add an object containing the options to the function call. For example:
<code>
Qualtrics.SurveyEngine.addOnload(function() {
	cleaveNums(this,{cleaveparms:{prefix:"$"},placeholder:"$0"});
});
</code>
===== 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 [[https://github.com/nosir/cleave.js|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.

Default: %%""%% (empty)
====== Qualtrics Wiki ======
[[start|Qualtrics Wiki]]