NumericTextBox API Reference

decimalSeparator string .

Sets or gets the char to use as the decimal separator in numeric values.

Code examples

Set the decimalSeparator property.

 let numericTextBox = document.querySelector('jqx-numeric-text-box');

 numericTextBox.decimalSeparator = '.';

Get the decimalSeparator property.

 let numericTextBox = document.querySelector('jqx-numeric-text-box');

 let decimalSeparator = numericTextBox.decimalSeparator;

disabled boolean false

Enables or disables the jqxNumericTextBox.

Code examples

Set the disabled property.

 let numericTextBox = document.querySelector('jqx-numeric-text-box');

 numericTextBox.disabled = false;

Get the disabled property.

 let numericTextBox = document.querySelector('jqx-numeric-text-box');

 let disabled = numericTextBox.disabled;

enableMouseWheelAction boolean false

Enables or disables incrementing/decrementing the value using the mouse wheel in jqxNumericTextBox.

Code examples

Set the enableMouseWheelAction property.

 let numericTextBox = document.querySelector('jqx-numeric-text-box');

 numericTextBox.enableMouseWheelAction = true;

Get the enableMouseWheelAction property.

 let numericTextBox = document.querySelector('jqx-numeric-text-box');

 let enableMouseWheelAction = numericTextBox.enableMouseWheelAction;

inputFormat string integer

Sets or gets the input format of the widget. Setting this property dynamically can lead to precision loss. Possible values: 'integer', 'floatingPoint', 'complex'.

Code examples

Set the inputFormat property.

 let numericTextBox = document.querySelector('jqx-numeric-text-box');

 numericTextBox.inputFormat = 'complex';

Get the inputFormat property.

 let numericTextBox = document.querySelector('jqx-numeric-text-box');

 let inputFormat = numericTextBox.inputFormat;

language string en

Sets or gets the language. Used in conjunction with the property messages.

Code examples

Set the language property.

 let numericTextBox = document.querySelector('jqx-numeric-text-box');

 numericTextBox.language = 'en';

Get the language property.

 let numericTextBox = document.querySelector('jqx-numeric-text-box');

 let language = numericTextBox.language;

max any null

Sets or gets the maximum value of the widget.

Code examples

Set the max property.

 let numericTextBox = document.querySelector('jqx-numeric-text-box');

 numericTextBox.max = 20;

Get the max property.

 let numericTextBox = document.querySelector('jqx-numeric-text-box');

 let max = numericTextBox.max;

messages object { "en": { "binary": "BIN", "octal": "OCT", "decimal": "DEC", "hexadecimal": "HEX", "missingReference": "jqxNumericTextBox: Missing reference to {{file}}.", "integerOnly": "jqxNumericTextBox: The property {{property}} can only be set when inputFormat is integer.", "noInteger": "jqxNumericTextBox: the property {{property}} cannot be set when inputFormat is integer.", "significantPrecisionDigits": "jqxNumericTextBox: the properties significantDigits and precisionDigits cannot be set at the same time." } }

Sets or gets an object specifying strings used in the widget that can be localized. Used in conjunction with the property language.

Code examples

Set the messages property.

 let numericTextBox = document.querySelector('jqx-numeric-text-box');

 numericTextBox.messages = { "de": { "binary": "2", "octal": "8", "decimal": "10", "hexadecimal": "16", "missingReference": "jqxNumericTextBox: Fehlende Bezugnahme auf {{file}}.", "integerOnly": "jqxNumericTextBox: Die Eigenschaft {{property}} kann nur eingestellt werden, wenn inputFormat integer ist.", "noInteger": "jqxNumericTextBox: Die Eigenschaft {{property}} kann nicht eingestellt werden, wenn inputFormat integer ist.", "significantPrecisionDigits": "jqxNumericTextBox: Die Eigenschaften significantDigits und precisionDigits können nicht zusammen eingestellt werden." } };

Get the messages property.

 let numericTextBox = document.querySelector('jqx-numeric-text-box');

 let messages = numericTextBox.messages;

min any null

Sets or gets the minimum value of the widget.

Code examples

Set the min property.

 let numericTextBox = document.querySelector('jqx-numeric-text-box');

 numericTextBox.min = 0;

Get the min property.

 let numericTextBox = document.querySelector('jqx-numeric-text-box');

 let min = numericTextBox.min;

placeholder string ""

Determines the widget's place holder displayed when the widget's input is empty.

Code examples

Set the placeholder property.

 let numericTextBox = document.querySelector('jqx-numeric-text-box');

 numericTextBox.placeholder = 'New Placeholder';

Get the placeholder property.

 let numericTextBox = document.querySelector('jqx-numeric-text-box');

 let placeholder = numericTextBox.placeholder;

popupEnabled boolean true

Determines if a pop-up will be displayed when the radix display button is clicked. The pop-up shows the entered value represented in the binary, octal, decimal and hexadecimal numeral systems.

Code examples

Set the popupEnabled property.

 let numericTextBox = document.querySelector('jqx-numeric-text-box');

 numericTextBox.popupEnabled = false;

Get the popupEnabled property.

 let numericTextBox = document.querySelector('jqx-numeric-text-box');

 let popupEnabled = numericTextBox.popupEnabled;

precisionDigits number null

Determines the number of digits after the decimal point. Applicable when inputFormat is either 'floatingPoint' or 'complex'.

Code examples

Set the precisionDigits property.

 let numericTextBox = document.querySelector('jqx-numeric-text-box');

 numericTextBox.precisionDigits = 6;

Get the precisionDigits property.

 let numericTextBox = document.querySelector('jqx-numeric-text-box');

 let precisionDigits = numericTextBox.precisionDigits;

radix any 10

Sets or gets the radix of the jqxNumericTextBox. The radix specifies the numeral system in which to display the widget's value. Applicable only when inputFormat is 'integer'. Possible values: 2, 8, 10, 16, 'binary', 'octal', 'decimal', 'hexadecimal'.

Code examples

Set the radix property.

 let numericTextBox = document.querySelector('jqx-numeric-text-box');

 numericTextBox.radix = binary;

Get the radix property.

 let numericTextBox = document.querySelector('jqx-numeric-text-box');

 let radix = numericTextBox.radix;

radixDisplay boolean false

Enables or disables the radix display button of the jqxNumericTextBox. Applicable only when inputFormat is 'integer'.

Code examples

Set the radixDisplay property.

 let numericTextBox = document.querySelector('jqx-numeric-text-box');

 numericTextBox.radixDisplay = false;

Get the radixDisplay property.

 let numericTextBox = document.querySelector('jqx-numeric-text-box');

 let radixDisplay = numericTextBox.radixDisplay;

readonly boolean false

Sets or gets the readonly state of the jqxNumericTextBox.

Code examples

Set the readonly property.

 let numericTextBox = document.querySelector('jqx-numeric-text-box');

 numericTextBox.readonly = false;

Get the readonly property.

 let numericTextBox = document.querySelector('jqx-numeric-text-box');

 let readonly = numericTextBox.readonly;

scientificNotation boolean false

Enables or disables outputting the value in scientific notation. Applicable only when inputFormat is 'integer'.

Code examples

Set the scientificNotation property.

 let numericTextBox = document.querySelector('jqx-numeric-text-box');

 numericTextBox.scientificNotation = false;

Get the scientificNotation property.

 let numericTextBox = document.querySelector('jqx-numeric-text-box');

 let scientificNotation = numericTextBox.scientificNotation;

showUnit boolean false

Enables or disables the visibility of the units.

Code examples

Set the showUnit property.

 let numericTextBox = document.querySelector('jqx-numeric-text-box');

 numericTextBox.showUnit = false;

Get the showUnit property.

 let numericTextBox = document.querySelector('jqx-numeric-text-box');

 let showUnit = numericTextBox.showUnit;

significantDigits number null

Determining how many significant digits are in a number. Applicable when inputFormat is either 'floatingPoint' or 'complex'.

Code examples

Set the significantDigits property.

 let numericTextBox = document.querySelector('jqx-numeric-text-box');

 numericTextBox.significantDigits = 6;

Get the significantDigits property.

 let numericTextBox = document.querySelector('jqx-numeric-text-box');

 let significantDigits = numericTextBox.significantDigits;

spinButtons boolean false

Enables or disables the visibility of the spin buttons.

Code examples

Set the spinButtons property.

 let numericTextBox = document.querySelector('jqx-numeric-text-box');

 numericTextBox.spinButtons = true;

Get the spinButtons property.

 let numericTextBox = document.querySelector('jqx-numeric-text-box');

 let spinButtons = numericTextBox.spinButtons;

spinButtonsDelay number 75

Sets the delay between repeats of spin buttons in miliseconds.

Code examples

Set the spinButtonsDelay property.

 let numericTextBox = document.querySelector('jqx-numeric-text-box');

 numericTextBox.spinButtonsDelay = 100;

Get the spinButtonsDelay property.

 let numericTextBox = document.querySelector('jqx-numeric-text-box');

 let spinButtonsDelay = numericTextBox.spinButtonsDelay;

spinButtonsInitialDelay number 0

Sets a delay before the first repeat iteration of spin buttons in miliseconds.

Code examples

Set the spinButtonsInitialDelay property.

 let numericTextBox = document.querySelector('jqx-numeric-text-box');

 numericTextBox.spinButtonsInitialDelay = 50;

Get the spinButtonsInitialDelay property.

 let numericTextBox = document.querySelector('jqx-numeric-text-box');

 let spinButtonsInitialDelay = numericTextBox.spinButtonsInitialDelay;

spinButtonsPosition string right

Sets or gets the position of the spin buttons of the jqxNumericTextBox. Possible values: 'left', 'right'.

Code examples

Set the spinButtonsPosition property.

 let numericTextBox = document.querySelector('jqx-numeric-text-box');

 numericTextBox.spinButtonsPosition = 'right';

Get the spinButtonsPosition property.

 let numericTextBox = document.querySelector('jqx-numeric-text-box');

 let spinButtonsPosition = numericTextBox.spinButtonsPosition;

spinButtonsStep any 1

Sets or gets the increase/decrease step.

Code examples

Set the spinButtonsStep property.

 let numericTextBox = document.querySelector('jqx-numeric-text-box');

 numericTextBox.spinButtonsStep = 3;

Get the spinButtonsStep property.

 let numericTextBox = document.querySelector('jqx-numeric-text-box');

 let spinButtonsStep = numericTextBox.spinButtonsStep;

unit string kg

Sets or gets the name of unit used in jqxNumericTextBox widget.

Code examples

Set the unit property.

 let numericTextBox = document.querySelector('jqx-numeric-text-box');

 numericTextBox.unit = 'mm';

Get the unit property.

 let numericTextBox = document.querySelector('jqx-numeric-text-box');

 let unit = numericTextBox.unit;

value any 0

Sets or gets the value of the jqxNumericTextBox widget.

Code examples

Set the value property.

 let numericTextBox = document.querySelector('jqx-numeric-text-box');

 numericTextBox.value = 10;

Get the value property.

 let numericTextBox = document.querySelector('jqx-numeric-text-box');

 let value = numericTextBox.value;

wordLength string int32

Sets or gets the word length. Applicable only when inputFormat is 'integer'. If min and/or max are not set by default, they will be set automatically based on the specified word length. Possible values: 'int8', 'uint8', 'int16', 'uint16', 'int32', 'uint32', 'int64', 'uint64'.

Code examples

Set the wordLength property.

 let numericTextBox = document.querySelector('jqx-numeric-text-box');

 numericTextBox.wordLength = 'int64';

Get the wordLength property.

 let numericTextBox = document.querySelector('jqx-numeric-text-box');

 let wordLength = numericTextBox.wordLength;

change Event

This event is triggered when the value is changed.

Code examples

Bind to the change event by type: jqxNumericTextBox

 let numericTextBox = document.querySelector('jqx-numeric-text-box');

 numericTextBox.addEventListener('change', function (event) {
     // event handling code goes here.
 }

close Event

This event is triggered when the pop-up is closed.

Code examples

Bind to the close event by type: jqxNumericTextBox

 let numericTextBox = document.querySelector('jqx-numeric-text-box');

 numericTextBox.addEventListener('close', function (event) {
     // event handling code goes here.
 }

open Event

This event is triggered when the pop-up is opened.

Code examples

Bind to the open event by type: jqxNumericTextBox

 let numericTextBox = document.querySelector('jqx-numeric-text-box');

 numericTextBox.addEventListener('open', function (event) {
     // event handling code goes here.
 }

radixChange Event

This event is triggered when the radix is changed.

Code examples

Bind to the radixChange event by type: jqxNumericTextBox

 let numericTextBox = document.querySelector('jqx-numeric-text-box');

 numericTextBox.addEventListener('radixChange', function (event) {
     // event handling code goes here.
 }

focus Method

Focuses the NumericTextBox.

Parameter	Type	Description
None

Return Value
None

Code examples

Invoke the focus method.

 let numericTextBox = document.querySelector('jqx-numeric-text-box');

 numericTextBox.focus();

val Method

Get/set the value of the NumericTextBox.

Parameter	Type	Description
value	string/number	The value to be set. If no parameter is passed, returns the displayed value of the jqxNumericTextBox.
suppressValidation	boolean	If true* is passed, the passed value will be set to the jqxNumericTextBox without validation.*

Return Value
String

Code examples

Invoke the val method.

// Get the value.

 let numericTextBox = document.querySelector('jqx-numeric-text-box');

 let val = numericTextBox.val();

// Set the value.

 let numericTextBox = document.querySelector('jqx-numeric-text-box');

 numericTextBox.val('10');

Properties

Code examples

Code examples

Code examples

Code examples

Code examples

Code examples

Code examples

Code examples

Code examples

Code examples

Code examples

Code examples

Code examples

Code examples

Code examples

Code examples

Code examples

Code examples

Code examples

Code examples

Code examples

Code examples

Code examples

Code examples

Code examples

Events

Code examples

Code examples

Code examples

Code examples

Methods

Code examples

Code examples