NumericTextBox JAVASCRIPT UI Component API

NumericTextBox Javascript API

Class

NumericTextBox

NumericTextBox

input field for entering a number. Includes number formatting for Engineers and Scientists.

Selector

smart-numeric-text-box

Properties

AanimationSets or gets the animation mode. Animation is disabled when the property is set to 'none'
DdecimalSeparatorSets or gets the char to use as the decimal separator in numeric values.
DdisabledEnables or disables the smartNumericTextBox.
DdropDownAppendToSets the parent container of the radix dropdown.
DdropDownEnabledDetermines if a dropdown will be displayed when the radix display button is clicked. The dropdown shows options for changing to the binary, octal, decimal, and hexadecimal numeral systems.
EenableMouseWheelActionEnables or disables incrementing/decrementing the value using the mouse wheel in smartNumericTextBox.
HhintSets additional helper text below the element.
IinputFormatSets or gets the input format of the widget. Setting this property dynamically can lead to precision loss.
LlabelSets a label above the element.
LleadingZerosIf this property is enabled, leading zeros are added (if necessary) to the binary and hexadecimal representations of a number based on wordLength.
LlocaleSets or gets the language. Used in conjunction with the property messages.
LlocalizeFormatFunctionCallback, related to localization module.
MmaxSets or gets the maximum value of the widget.
MmessagesSets or gets an object specifying strings used in the widget that can be localized. Used in conjunction with the property locale.
MminSets or gets the minimum value of the widget.
NnameThe name of the control.
NnullableEnables or disables the setting of the value property to null or empty string.
OopenedSets or gets whether the radix dropdown is opened. Applicable only when dropDownEnabled is true.
OoutputFormatStringSets or gets the pattern which the input value is displayed in when the element is not focused. All formats available to the NumberRenderer class can be applied as outputFormatString.
PplaceholderDetermines the widget's place holder displayed when the widget's input is empty.
PprecisionDigitsDetermines the number of digits after the decimal point. Applicable when inputFormat is either 'floatingPoint' or 'complex'.
RradixSets or gets the radix of the smartNumericTextBox. The radix specifies the numeral system in which to display the widget's value. Applicable only when inputFormat is 'integer'.
RradixDisplayEnables or disables the radix display button of the smartNumericTextBox. Applicable only when inputFormat is 'integer'.
RradixDisplayPositionSets or gets the position of the radix display button of the smartNumericTextBox.
RreadonlySets or gets the readonly state of the smartNumericTextBox.
RrightToLeftSets or gets the value indicating whether the element is aligned to support locales using right-to-left fonts.
SscientificNotationEnables or disables outputting the value in scientific notation. Applicable only when inputFormat is 'integer'.
SshowDropDownValuesDetermines whether to show the current value represented in all four numeral systems in the drop down.
SshowUnitEnables or disables the visibility of the units.
SsignificantDigitsDetermining how many significant digits are in a number. Applicable when inputFormat is either 'floatingPoint' or 'complex'.
SspinButtonsEnables or disables the visibility of the spin buttons.
SspinButtonsDelaySets the delay between repeats of spin buttons in miliseconds.
SspinButtonsInitialDelaySets a delay before the first repeat iteration of spin buttons in miliseconds.
SspinButtonsPositionSets or gets the position of the spin buttons of the smartNumericTextBox.
SspinButtonsStepSets or gets the increase/decrease step.
TthemeDetermines the theme. Theme defines the look of the element
UunfocusableIf is set to true, the element cannot be focused.
UunitSets or gets the name of unit used in smartNumericTextBox widget.
VvalidationSets the value's validation by min/max. If 'strict' is applied, the value is always validated by min and max. If 'interaction' is applied, programmatic value changes are not coerced to min/max and if min/max are changed, resulting in the current value being out of range, the value is not coerced, and no change event is fired.
VvalueSets or gets the value of the smartNumericTextBox widget.
WwordLengthSets 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.

Events

CchangeThis event is triggered when the value is changed.
CchangingThis event is triggered when the value in the input is being changed via keypress or paste.
CcloseThis event is triggered when the dropdown is closed.
CclosingThis event is triggered when the dropdown is about to be closed. The closing operation can be canceled by calling event.preventDefault() in the event handler function.
OopenThis event is triggered when the dropdown is opened.
OopeningThis event is triggered when the dropdown is about to be opened. The opening operation can be canceled by calling event.preventDefault() in the event handler function.
RradixChangeThis event is triggered when the radix is changed.

Methods

FfocusFocuses the NumericTextBox.
VvalGet/set the value of the NumericTextBox.

Properties

animation"none" | "simple" | "advanced"

Sets or gets the animation mode. Animation is disabled when the property is set to 'none'

Allowed Values

  • "none" - animation is disabled
  • "simple" - ripple animation is disabled
  • "advanced" - all animations are enabled

Default value

"advanced"

Example

Set the animation property. 

 <smart-numeric-text-box animation='none'></smart-numeric-text-box>

Set the animation property by using the HTML Element's instance. 

 const numerictextbox = document.querySelector('smart-numeric-text-box');
 numerictextbox.animation = 'simple';

Get the animation property. 

 const numerictextbox = document.querySelector('smart-numeric-text-box');
 let animation = numerictextbox.animation;

decimalSeparatorstring

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

Default value

"."

Example

Set the decimalSeparator property. 

 <smart-numeric-text-box decimal-separator=','></smart-numeric-text-box>

Set the decimalSeparator property by using the HTML Element's instance. 

 const numerictextbox = document.querySelector('smart-numeric-text-box');
 numerictextbox.decimalSeparator = '.';

Get the decimalSeparator property. 

 const numerictextbox = document.querySelector('smart-numeric-text-box');
 let decimalSeparator = numerictextbox.decimalSeparator;

disabledboolean

Enables or disables the smartNumericTextBox.

Default value

false

Example

Set the disabled property. 

 <smart-numeric-text-box disabled></smart-numeric-text-box>

Set the disabled property by using the HTML Element's instance. 

 const numerictextbox = document.querySelector('smart-numeric-text-box');
 numerictextbox.disabled = false;

Get the disabled property. 

 const numerictextbox = document.querySelector('smart-numeric-text-box');
 let disabled = numerictextbox.disabled;

dropDownAppendToany

Sets the parent container of the radix dropdown.

Example

Set the dropDownAppendTo property. 

 <smart-numeric-text-box drop-down-append-to='body'></smart-numeric-text-box>

Set the dropDownAppendTo property by using the HTML Element's instance. 

 const numerictextbox = document.querySelector('smart-numeric-text-box');
 numerictextbox.dropDownAppendTo = null;

Get the dropDownAppendTo property. 

 const numerictextbox = document.querySelector('smart-numeric-text-box');
 let dropDownAppendTo = numerictextbox.dropDownAppendTo;

dropDownEnabledboolean

Determines if a dropdown will be displayed when the radix display button is clicked. The dropdown shows options for changing to the binary, octal, decimal, and hexadecimal numeral systems.

Default value

false

Example

Set the dropDownEnabled property. 

 <smart-numeric-text-box drop-down-enabled></smart-numeric-text-box>

Set the dropDownEnabled property by using the HTML Element's instance. 

 const numerictextbox = document.querySelector('smart-numeric-text-box');
 numerictextbox.dropDownEnabled = false;

Get the dropDownEnabled property. 

 const numerictextbox = document.querySelector('smart-numeric-text-box');
 let dropDownEnabled = numerictextbox.dropDownEnabled;

enableMouseWheelActionboolean

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

Default value

false

Example

Set the enableMouseWheelAction property. 

 <smart-numeric-text-box enable-mouse-wheel-action></smart-numeric-text-box>

Set the enableMouseWheelAction property by using the HTML Element's instance. 

 const numerictextbox = document.querySelector('smart-numeric-text-box');
 numerictextbox.enableMouseWheelAction = true;

Get the enableMouseWheelAction property. 

 const numerictextbox = document.querySelector('smart-numeric-text-box');
 let enableMouseWheelAction = numerictextbox.enableMouseWheelAction;

hintstring

Sets additional helper text below the element.

Default value

""

Example

Set the hint property. 

 <smart-numeric-text-box hint='Helper text'></smart-numeric-text-box>

Set the hint property by using the HTML Element's instance. 

 const numerictextbox = document.querySelector('smart-numeric-text-box');
 numerictextbox.hint = 'Hint';

Get the hint property. 

 const numerictextbox = document.querySelector('smart-numeric-text-box');
 let hint = numerictextbox.hint;

inputFormat"integer" | "floatingPoint" | "complex"

Sets or gets the input format of the widget. Setting this property dynamically can lead to precision loss.

Default value

"integer"

Example

Set the inputFormat property. 

 <smart-numeric-text-box input-format='floatingPoint'></smart-numeric-text-box>

Set the inputFormat property by using the HTML Element's instance. 

 const numerictextbox = document.querySelector('smart-numeric-text-box');
 numerictextbox.inputFormat = 'complex';

Get the inputFormat property. 

 const numerictextbox = document.querySelector('smart-numeric-text-box');
 let inputFormat = numerictextbox.inputFormat;

labelstring

Sets a label above the element.

Default value

""

Example

Set the label property. 

 <smart-numeric-text-box label='Helper text'></smart-numeric-text-box>

Set the label property by using the HTML Element's instance. 

 const numerictextbox = document.querySelector('smart-numeric-text-box');
 numerictextbox.label = 'Hint';

Get the label property. 

 const numerictextbox = document.querySelector('smart-numeric-text-box');
 let label = numerictextbox.label;

leadingZerosboolean

If this property is enabled, leading zeros are added (if necessary) to the binary and hexadecimal representations of a number based on wordLength.

Default value

false

Example

Set the leadingZeros property. 

 <smart-numeric-text-box leading-zeros></smart-numeric-text-box>

Set the leadingZeros property by using the HTML Element's instance. 

 const numerictextbox = document.querySelector('smart-numeric-text-box');
 numerictextbox.leadingZeros = false;

Get the leadingZeros property. 

 const numerictextbox = document.querySelector('smart-numeric-text-box');
 let leadingZeros = numerictextbox.leadingZeros;

localestring

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

Default value

"en"

Example

Set the locale property. 

 <smart-numeric-text-box locale='de'></smart-numeric-text-box>

Set the locale property by using the HTML Element's instance. 

 const numerictextbox = document.querySelector('smart-numeric-text-box');
 numerictextbox.locale = 'en';

Get the locale property. 

 const numerictextbox = document.querySelector('smart-numeric-text-box');
 let locale = numerictextbox.locale;

localizeFormatFunctionfunction | null

Callback, related to localization module.

Example

Set the localizeFormatFunction property. 

 <smart-numeric-text-box localize-format-function='function(){return '...'}'></smart-numeric-text-box>

Set the localizeFormatFunction property by using the HTML Element's instance. 

 const numerictextbox = document.querySelector('smart-numeric-text-box');
 numerictextbox.localizeFormatFunction = function(){return '...'};

Get the localizeFormatFunction property. 

 const numerictextbox = document.querySelector('smart-numeric-text-box');
 let localizeFormatFunction = numerictextbox.localizeFormatFunction;

maxnumber | string

Sets or gets the maximum value of the widget.

Example

Set the max property. 

 <smart-numeric-text-box max='10'></smart-numeric-text-box>

Set the max property by using the HTML Element's instance. 

 const numerictextbox = document.querySelector('smart-numeric-text-box');
 numerictextbox.max = 20;

Get the max property. 

 const numerictextbox = document.querySelector('smart-numeric-text-box');
 let max = numerictextbox.max;

messagesobject

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

Default value




"en": {

"propertyUnknownType": "'{{name}}' property is with undefined 'type' member!",

"propertyInvalidValue": "Invalid '{{name}}' property value! Actual value: {{actualValue}}, Expected value: {{value}}!",

"propertyInvalidValueType": "Invalid '{{name}}' property value type! Actual type: {{actualType}}, Expected type: {{type}}!",

"elementNotInDOM": "Element does not exist in DOM! Please, add the element to the DOM, before invoking a method.",

"moduleUndefined": "Module is undefined.",

"missingReference": "{{elementType}}: Missing reference to {{files}}.",

"htmlTemplateNotSuported": "{{elementType}}: Browser doesn't support HTMLTemplate elements.",

"invalidTemplate": "{{elementType}}: '{{property}}' property accepts a string that must match the id of an HTMLTemplate element from the DOM.",

"binary": "BIN",

"octal": "OCT",

"decimal": "DEC",

"hexadecimal": "HEX",

"integerOnly": "smartNumericTextBox: The property {{property}} can only be set when inputFormat is integer.",

"noInteger": "smartNumericTextBox: the property {{property}} cannot be set when inputFormat is integer.",

"significantPrecisionDigits": "smartNumericTextBox: the properties significantDigits and precisionDigits cannot be set at the same time."

}

Example

Set the messages property. 

 <smart-numeric-text-box messages='{"de":{"propertyUnknownType":"Die Eigenschaft '{{name}}' hat ein nicht definiertes 'type'-Member!","propertyInvalidValue":"Ungultiger Eigenschaftswert '{{name}}'! Aktueller Wert: {{actualValue}}, Erwarteter Wert: {{value}}!","propertyInvalidValueType":"Ungultiger Eigenschaftswert '{{name}}'! Aktueller Wert: {{actualType}}, Erwarteter Wert: {{type}}!","elementNotInDOM":"Element existiert nicht in DOM! Bitte fugen Sie das Element zum DOM hinzu, bevor Sie eine Methode aufrufen.","moduleUndefined":"Modul ist nicht definiert.","missingReference":"{{elementType}}: Fehlende Bezugnahme auf {{file}}.","htmlTemplateNotSuported":"{{elementType}}: Browser unterstutzt keine HTMLTemplate-Elemente.","invalidTemplate":"{{elementType}}: '{{property}}' Die Eigenschaft akzeptiert eine Zeichenfolge, die mit der ID eines HTMLTemplate-Elements aus dem DOM ubereinstimmen muss.","binary":"Dual","octal":"Oktal","decimal":"Dezimal","hexadecimal":"Hexadezimal","integerOnly":"smartNumericTextBox: Die Eigenschaft {{property}} kann nur eingestellt werden, wenn inputFormat integer ist.","noInteger":"smartNumericTextBox: Die Eigenschaft {{property}} kann nicht eingestellt werden, wenn inputFormat integer ist.","significantPrecisionDigits":"smartNumericTextBox: Die Eigenschaften significantDigits und precisionDigits konnen nicht zusammen eingestellt werden."}}'></smart-numeric-text-box>

Set the messages property by using the HTML Element's instance. 

 const numerictextbox = document.querySelector('smart-numeric-text-box');
 numerictextbox.messages = {"en":{"propertyUnknownType":"'{{name}}' property is with undefined 'type' member!","propertyInvalidValue":"Invalid '{{name}}' property value! Actual value: {{actualValue}}, Expected value: {{value}}!","propertyInvalidValueType":"Invalid '{{name}}' property value type! Actual type: {{actualType}}, Expected type: {{type}}!","elementNotInDOM":"Element does not exist in DOM! Please, add the element to the DOM, before invoking a method.","moduleUndefined":"Module is undefined.","missingReference":"{{elementType}}: Missing reference to {{files}}.","htmlTemplateNotSuported":"{{elementType}}: Browser doesn't support HTMLTemplate elements.","invalidTemplate":"{{elementType}}: '{{property}}' property accepts a string that must match the id of an HTMLTemplate element from the DOM.","binary":"BIN","octal":"OCT","decimal":"DEC","hexadecimal":"HEX","integerOnly":"smartNumericTextBox: The property {{property}} can only be set when inputFormat is integer.","noInteger":"smartNumericTextBox: the property {{property}} cannot be set when inputFormat is integer.","significantPrecisionDigits":"smartNumericTextBox: the properties significantDigits and precisionDigits cannot be set at the same time."}};

Get the messages property. 

 const numerictextbox = document.querySelector('smart-numeric-text-box');
 let messages = numerictextbox.messages;

minnumber | string

Sets or gets the minimum value of the widget.

Example

Set the min property. 

 <smart-numeric-text-box min='5'></smart-numeric-text-box>

Set the min property by using the HTML Element's instance. 

 const numerictextbox = document.querySelector('smart-numeric-text-box');
 numerictextbox.min = 0;

Get the min property. 

 const numerictextbox = document.querySelector('smart-numeric-text-box');
 let min = numerictextbox.min;

namestring

The name of the control.

Default value

""

Example

Set the name property. 

 <smart-numeric-text-box name='textbox'></smart-numeric-text-box>

Set the name property by using the HTML Element's instance. 

 const numerictextbox = document.querySelector('smart-numeric-text-box');
 numerictextbox.name = 'numerictextbox';

Get the name property. 

 const numerictextbox = document.querySelector('smart-numeric-text-box');
 let name = numerictextbox.name;

nullableboolean

Enables or disables the setting of the value property to null or empty string.

Default value

false

Example

Set the nullable property. 

 <smart-numeric-text-box nullable></smart-numeric-text-box>

Set the nullable property by using the HTML Element's instance. 

 const numerictextbox = document.querySelector('smart-numeric-text-box');
 numerictextbox.nullable = false;

Get the nullable property. 

 const numerictextbox = document.querySelector('smart-numeric-text-box');
 let nullable = numerictextbox.nullable;

openedboolean

Sets or gets whether the radix dropdown is opened. Applicable only when dropDownEnabled is true.

Default value

false

Example

Set the opened property. 

 <smart-numeric-text-box opened></smart-numeric-text-box>

Set the opened property by using the HTML Element's instance. 

 const numerictextbox = document.querySelector('smart-numeric-text-box');
 numerictextbox.opened = true;

Get the opened property. 

 const numerictextbox = document.querySelector('smart-numeric-text-box');
 let opened = numerictextbox.opened;

outputFormatStringstring

Sets or gets the pattern which the input value is displayed in when the element is not focused. All formats available to the NumberRenderer class can be applied as outputFormatString.

Default value

"null"

Example

Set the outputFormatString property. 

 <smart-numeric-text-box output-format-string='U'></smart-numeric-text-box>

Set the outputFormatString property by using the HTML Element's instance. 

 const numerictextbox = document.querySelector('smart-numeric-text-box');
 numerictextbox.outputFormatString = '#.00';

Get the outputFormatString property. 

 const numerictextbox = document.querySelector('smart-numeric-text-box');
 let outputFormatString = numerictextbox.outputFormatString;

placeholderstring

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

Default value

""""

Example

Set the placeholder property. 

 <smart-numeric-text-box placeholder='Placeholder'></smart-numeric-text-box>

Set the placeholder property by using the HTML Element's instance. 

 const numerictextbox = document.querySelector('smart-numeric-text-box');
 numerictextbox.placeholder = 'New Placeholder';

Get the placeholder property. 

 const numerictextbox = document.querySelector('smart-numeric-text-box');
 let placeholder = numerictextbox.placeholder;

precisionDigitsnumber

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

Example

Set the precisionDigits property. 

 <smart-numeric-text-box precision-digits='5'></smart-numeric-text-box>

Set the precisionDigits property by using the HTML Element's instance. 

 const numerictextbox = document.querySelector('smart-numeric-text-box');
 numerictextbox.precisionDigits = 6;

Get the precisionDigits property. 

 const numerictextbox = document.querySelector('smart-numeric-text-box');
 let precisionDigits = numerictextbox.precisionDigits;

radix"2" | "8" | "10" | "16" | "binary" | "octal" | "decimal" | "hexadecimal"

Sets or gets the radix of the smartNumericTextBox. The radix specifies the numeral system in which to display the widget's value. Applicable only when inputFormat is 'integer'.

Default value

10

Example

Set the radix property. 

 <smart-numeric-text-box radix='8'></smart-numeric-text-box>

Set the radix property by using the HTML Element's instance. 

 const numerictextbox = document.querySelector('smart-numeric-text-box');
 numerictextbox.radix = binary;

Get the radix property. 

 const numerictextbox = document.querySelector('smart-numeric-text-box');
 let radix = numerictextbox.radix;

radixDisplayboolean

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

Default value

false

Example

Set the radixDisplay property. 

 <smart-numeric-text-box radix-display></smart-numeric-text-box>

Set the radixDisplay property by using the HTML Element's instance. 

 const numerictextbox = document.querySelector('smart-numeric-text-box');
 numerictextbox.radixDisplay = false;

Get the radixDisplay property. 

 const numerictextbox = document.querySelector('smart-numeric-text-box');
 let radixDisplay = numerictextbox.radixDisplay;

radixDisplayPosition"left" | "right"

Sets or gets the position of the radix display button of the smartNumericTextBox.

Default value

"left"

Example

Set the radixDisplayPosition property. 

 <smart-numeric-text-box radix-display-position='right'></smart-numeric-text-box>

Set the radixDisplayPosition property by using the HTML Element's instance. 

 const numerictextbox = document.querySelector('smart-numeric-text-box');
 numerictextbox.radixDisplayPosition = 'left';

Get the radixDisplayPosition property. 

 const numerictextbox = document.querySelector('smart-numeric-text-box');
 let radixDisplayPosition = numerictextbox.radixDisplayPosition;

readonlyboolean

Sets or gets the readonly state of the smartNumericTextBox.

Default value

false

Example

Set the readonly property. 

 <smart-numeric-text-box readonly></smart-numeric-text-box>

Set the readonly property by using the HTML Element's instance. 

 const numerictextbox = document.querySelector('smart-numeric-text-box');
 numerictextbox.readonly = false;

Get the readonly property. 

 const numerictextbox = document.querySelector('smart-numeric-text-box');
 let readonly = numerictextbox.readonly;

rightToLeftboolean

Sets or gets the value indicating whether the element is aligned to support locales using right-to-left fonts.

Default value

false
Try a demo showcasing the rightToLeft property.

Example

Set the rightToLeft property. 

 <smart-numeric-text-box right-to-left></smart-numeric-text-box>

Set the rightToLeft property by using the HTML Element's instance. 

 const numerictextbox = document.querySelector('smart-numeric-text-box');
 numerictextbox.rightToLeft = true;

Get the rightToLeft property. 

 const numerictextbox = document.querySelector('smart-numeric-text-box');
 let rightToLeft = numerictextbox.rightToLeft;

scientificNotationboolean

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

Default value

false

Example

Set the scientificNotation property. 

 <smart-numeric-text-box scientific-notation></smart-numeric-text-box>

Set the scientificNotation property by using the HTML Element's instance. 

 const numerictextbox = document.querySelector('smart-numeric-text-box');
 numerictextbox.scientificNotation = false;

Get the scientificNotation property. 

 const numerictextbox = document.querySelector('smart-numeric-text-box');
 let scientificNotation = numerictextbox.scientificNotation;

showDropDownValuesboolean

Determines whether to show the current value represented in all four numeral systems in the drop down.

Default value

false

Example

Set the showDropDownValues property. 

 <smart-numeric-text-box show-drop-down-values></smart-numeric-text-box>

Set the showDropDownValues property by using the HTML Element's instance. 

 const numerictextbox = document.querySelector('smart-numeric-text-box');
 numerictextbox.showDropDownValues = false;

Get the showDropDownValues property. 

 const numerictextbox = document.querySelector('smart-numeric-text-box');
 let showDropDownValues = numerictextbox.showDropDownValues;

showUnitboolean

Enables or disables the visibility of the units.

Default value

false

Example

Set the showUnit property. 

 <smart-numeric-text-box show-unit></smart-numeric-text-box>

Set the showUnit property by using the HTML Element's instance. 

 const numerictextbox = document.querySelector('smart-numeric-text-box');
 numerictextbox.showUnit = false;

Get the showUnit property. 

 const numerictextbox = document.querySelector('smart-numeric-text-box');
 let showUnit = numerictextbox.showUnit;

significantDigitsnumber

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

Default value

8

Example

Set the significantDigits property. 

 <smart-numeric-text-box significant-digits='5'></smart-numeric-text-box>

Set the significantDigits property by using the HTML Element's instance. 

 const numerictextbox = document.querySelector('smart-numeric-text-box');
 numerictextbox.significantDigits = 6;

Get the significantDigits property. 

 const numerictextbox = document.querySelector('smart-numeric-text-box');
 let significantDigits = numerictextbox.significantDigits;

spinButtonsboolean

Enables or disables the visibility of the spin buttons.

Default value

false

Example

Set the spinButtons property. 

 <smart-numeric-text-box spin-buttons></smart-numeric-text-box>

Set the spinButtons property by using the HTML Element's instance. 

 const numerictextbox = document.querySelector('smart-numeric-text-box');
 numerictextbox.spinButtons = true;

Get the spinButtons property. 

 const numerictextbox = document.querySelector('smart-numeric-text-box');
 let spinButtons = numerictextbox.spinButtons;

spinButtonsDelaynumber

Sets the delay between repeats of spin buttons in miliseconds.

Default value

75

Example

Set the spinButtonsDelay property. 

 <smart-numeric-text-box spin-buttons-delay='50'></smart-numeric-text-box>

Set the spinButtonsDelay property by using the HTML Element's instance. 

 const numerictextbox = document.querySelector('smart-numeric-text-box');
 numerictextbox.spinButtonsDelay = 100;

Get the spinButtonsDelay property. 

 const numerictextbox = document.querySelector('smart-numeric-text-box');
 let spinButtonsDelay = numerictextbox.spinButtonsDelay;

spinButtonsInitialDelaynumber

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

Default value

0

Example

Set the spinButtonsInitialDelay property. 

 <smart-numeric-text-box spin-buttons-initial-delay='25'></smart-numeric-text-box>

Set the spinButtonsInitialDelay property by using the HTML Element's instance. 

 const numerictextbox = document.querySelector('smart-numeric-text-box');
 numerictextbox.spinButtonsInitialDelay = 50;

Get the spinButtonsInitialDelay property. 

 const numerictextbox = document.querySelector('smart-numeric-text-box');
 let spinButtonsInitialDelay = numerictextbox.spinButtonsInitialDelay;

spinButtonsPosition"left" | "right"

Sets or gets the position of the spin buttons of the smartNumericTextBox.

Default value

"right"

Example

Set the spinButtonsPosition property. 

 <smart-numeric-text-box spin-buttons-position='left'></smart-numeric-text-box>

Set the spinButtonsPosition property by using the HTML Element's instance. 

 const numerictextbox = document.querySelector('smart-numeric-text-box');
 numerictextbox.spinButtonsPosition = 'right';

Get the spinButtonsPosition property. 

 const numerictextbox = document.querySelector('smart-numeric-text-box');
 let spinButtonsPosition = numerictextbox.spinButtonsPosition;

spinButtonsStepnumber | string

Sets or gets the increase/decrease step.

Default value

1

Example

Set the spinButtonsStep property. 

 <smart-numeric-text-box spin-buttons-step='2'></smart-numeric-text-box>

Set the spinButtonsStep property by using the HTML Element's instance. 

 const numerictextbox = document.querySelector('smart-numeric-text-box');
 numerictextbox.spinButtonsStep = 3;

Get the spinButtonsStep property. 

 const numerictextbox = document.querySelector('smart-numeric-text-box');
 let spinButtonsStep = numerictextbox.spinButtonsStep;

themestring

Determines the theme. Theme defines the look of the element

Default value

""

Example

Set the theme property. 

 <smart-numeric-text-box theme='blue'></smart-numeric-text-box>

Set the theme property by using the HTML Element's instance. 

 const numerictextbox = document.querySelector('smart-numeric-text-box');
 numerictextbox.theme = 'red';

Get the theme property. 

 const numerictextbox = document.querySelector('smart-numeric-text-box');
 let theme = numerictextbox.theme;

unfocusableboolean

If is set to true, the element cannot be focused.

Default value

false

Example

Set the unfocusable property. 

 <smart-numeric-text-box unfocusable></smart-numeric-text-box>

Set the unfocusable property by using the HTML Element's instance. 

 const numerictextbox = document.querySelector('smart-numeric-text-box');
 numerictextbox.unfocusable = false;

Get the unfocusable property. 

 const numerictextbox = document.querySelector('smart-numeric-text-box');
 let unfocusable = numerictextbox.unfocusable;

unitstring

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

Default value

"kg"

Example

Set the unit property. 

 <smart-numeric-text-box unit='cm'></smart-numeric-text-box>

Set the unit property by using the HTML Element's instance. 

 const numerictextbox = document.querySelector('smart-numeric-text-box');
 numerictextbox.unit = 'mm';

Get the unit property. 

 const numerictextbox = document.querySelector('smart-numeric-text-box');
 let unit = numerictextbox.unit;

validation"strict" | "interaction"

Sets the value's validation by min/max. If 'strict' is applied, the value is always validated by min and max. If 'interaction' is applied, programmatic value changes are not coerced to min/max and if min/max are changed, resulting in the current value being out of range, the value is not coerced, and no change event is fired.

Default value

"strict"

Example

Set the validation property. 

 <smart-numeric-text-box validation='strict'></smart-numeric-text-box>

Set the validation property by using the HTML Element's instance. 

 const numerictextbox = document.querySelector('smart-numeric-text-box');
 numerictextbox.validation = 'interaction';

Get the validation property. 

 const numerictextbox = document.querySelector('smart-numeric-text-box');
 let validation = numerictextbox.validation;

valueany

Sets or gets the value of the smartNumericTextBox widget.

Default value

0

Example

Set the value property. 

 <smart-numeric-text-box value='5'></smart-numeric-text-box>

Set the value property by using the HTML Element's instance. 

 const numerictextbox = document.querySelector('smart-numeric-text-box');
 numerictextbox.value = 10;

Get the value property. 

 const numerictextbox = document.querySelector('smart-numeric-text-box');
 let value = numerictextbox.value;

wordLength"int8" | "uint8" | "int16" | "uint16" | "int32" | "uint32" | "int64" | "uint64"

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.

Default value

"int32"

Example

Set the wordLength property. 

 <smart-numeric-text-box word-length='int8'></smart-numeric-text-box>

Set the wordLength property by using the HTML Element's instance. 

 const numerictextbox = document.querySelector('smart-numeric-text-box');
 numerictextbox.wordLength = 'int64';

Get the wordLength property. 

 const numerictextbox = document.querySelector('smart-numeric-text-box');
 let wordLength = numerictextbox.wordLength;

Events

changeCustomEvent

This event is triggered when the value is changed.

  • Bubbles Yes
  • Cancelable No
  • Interface CustomEvent
  • Event handler property onChange

Arguments

evCustomEvent

Methods

isDefaultPrevented

Returns true if the event was prevented by any of its subscribers.

Returns

boolean true if the default action was prevented. Otherwise, returns false.

preventDefault

The preventDefault() method prevents the default action for a specified event. In this way, the source component suppresses the built-in behavior that follows the event.

stopPropagation

The stopPropagation() method of the Event interface prevents further propagation of the current event in the capturing and bubbling phases.

Example

Set up the event handler of change event. 

const numerictextbox = document.querySelector('smart-numeric-text-box');
numerictextbox.addEventListener('change', function (event) {
	// event handling code goes here.
})

changingCustomEvent

This event is triggered when the value in the input is being changed via keypress or paste.

  • Bubbles Yes
  • Cancelable Yes
  • Interface CustomEvent
  • Event handler property onChanging

Arguments

evCustomEvent

Methods

isDefaultPrevented

Returns true if the event was prevented by any of its subscribers.

Returns

boolean true if the default action was prevented. Otherwise, returns false.

preventDefault

The preventDefault() method prevents the default action for a specified event. In this way, the source component suppresses the built-in behavior that follows the event.

stopPropagation

The stopPropagation() method of the Event interface prevents further propagation of the current event in the capturing and bubbling phases.

Example

Set up the event handler of changing event. 

const numerictextbox = document.querySelector('smart-numeric-text-box');
numerictextbox.addEventListener('changing', function (event) {
	// event handling code goes here.
})

closeCustomEvent

This event is triggered when the dropdown is closed.

  • Bubbles Yes
  • Cancelable No
  • Interface CustomEvent
  • Event handler property onClose

Arguments

evCustomEvent

Methods

isDefaultPrevented

Returns true if the event was prevented by any of its subscribers.

Returns

boolean true if the default action was prevented. Otherwise, returns false.

preventDefault

The preventDefault() method prevents the default action for a specified event. In this way, the source component suppresses the built-in behavior that follows the event.

stopPropagation

The stopPropagation() method of the Event interface prevents further propagation of the current event in the capturing and bubbling phases.

Example

Set up the event handler of close event. 

const numerictextbox = document.querySelector('smart-numeric-text-box');
numerictextbox.addEventListener('close', function (event) {
	// event handling code goes here.
})

closingCustomEvent

This event is triggered when the dropdown is about to be closed. The closing operation can be canceled by calling event.preventDefault() in the event handler function.

  • Bubbles Yes
  • Cancelable Yes
  • Interface CustomEvent
  • Event handler property onClosing

Arguments

evCustomEvent

Methods

isDefaultPrevented

Returns true if the event was prevented by any of its subscribers.

Returns

boolean true if the default action was prevented. Otherwise, returns false.

preventDefault

The preventDefault() method prevents the default action for a specified event. In this way, the source component suppresses the built-in behavior that follows the event.

stopPropagation

The stopPropagation() method of the Event interface prevents further propagation of the current event in the capturing and bubbling phases.

Example

Set up the event handler of closing event. 

const numerictextbox = document.querySelector('smart-numeric-text-box');
numerictextbox.addEventListener('closing', function (event) {
	// event handling code goes here.
})

openCustomEvent

This event is triggered when the dropdown is opened.

  • Bubbles Yes
  • Cancelable No
  • Interface CustomEvent
  • Event handler property onOpen

Arguments

evCustomEvent

Methods

isDefaultPrevented

Returns true if the event was prevented by any of its subscribers.

Returns

boolean true if the default action was prevented. Otherwise, returns false.

preventDefault

The preventDefault() method prevents the default action for a specified event. In this way, the source component suppresses the built-in behavior that follows the event.

stopPropagation

The stopPropagation() method of the Event interface prevents further propagation of the current event in the capturing and bubbling phases.

Example

Set up the event handler of open event. 

const numerictextbox = document.querySelector('smart-numeric-text-box');
numerictextbox.addEventListener('open', function (event) {
	// event handling code goes here.
})

openingCustomEvent

This event is triggered when the dropdown is about to be opened. The opening operation can be canceled by calling event.preventDefault() in the event handler function.

  • Bubbles Yes
  • Cancelable Yes
  • Interface CustomEvent
  • Event handler property onOpening

Arguments

evCustomEvent

Methods

isDefaultPrevented

Returns true if the event was prevented by any of its subscribers.

Returns

boolean true if the default action was prevented. Otherwise, returns false.

preventDefault

The preventDefault() method prevents the default action for a specified event. In this way, the source component suppresses the built-in behavior that follows the event.

stopPropagation

The stopPropagation() method of the Event interface prevents further propagation of the current event in the capturing and bubbling phases.

Example

Set up the event handler of opening event. 

const numerictextbox = document.querySelector('smart-numeric-text-box');
numerictextbox.addEventListener('opening', function (event) {
	// event handling code goes here.
})

radixChangeCustomEvent

This event is triggered when the radix is changed.

  • Bubbles Yes
  • Cancelable No
  • Interface CustomEvent
  • Event handler property onRadixChange

Arguments

evCustomEvent

Methods

isDefaultPrevented

Returns true if the event was prevented by any of its subscribers.

Returns

boolean true if the default action was prevented. Otherwise, returns false.

preventDefault

The preventDefault() method prevents the default action for a specified event. In this way, the source component suppresses the built-in behavior that follows the event.

stopPropagation

The stopPropagation() method of the Event interface prevents further propagation of the current event in the capturing and bubbling phases.

Example

Set up the event handler of radixChange event. 

const numerictextbox = document.querySelector('smart-numeric-text-box');
numerictextbox.addEventListener('radixChange', function (event) {
	// event handling code goes here.
})

Methods

focus(): void

Focuses the NumericTextBox.


Invoke the focus method.

const numerictextbox = document.querySelector('smart-numeric-text-box');
numerictextbox.focus();

val( value?: string | number, suppressValidation?: boolean): string

Get/set the value of the NumericTextBox.

Arguments

value?string | number

The value to be set. If no parameter is passed, returns the displayed value of the smartNumericTextBox.

suppressValidation?boolean

If true is passed, the passed value will be set to the smartNumericTextBox without validation.

Returnsstring

Invoke the val method.

const numerictextbox = document.querySelector('smart-numeric-text-box');
const result = numerictextbox.val(true,"10");

CSS Variables

--smart-numeric-text-box-default-widthvar()

Default value

"var(--smart-editor-width)"

smartNumericTextBox default width

--smart-numeric-text-box-default-heightvar()

Default value

"var(--smart-editor-height)"

smartNumericTextBox default height

--smart-numeric-text-box-default-radix-display-widthvar()

Default value

"12%"

smartNumericTextBox default radix display button width

--smart-numeric-text-box-default-unit-display-widthvar()

Default value

"var(--smart-editor-addon-width)"

smartNumericTextBox default unit display width

--smart-numeric-text-box-text-alignvar()

Default value

"right"

smartNumericTextBox input text align