Numberbox Component — fgta5js Documentation

Overview

Inheritance Notice: Class Numberbox inherits all of its core state tracking, validation logic, editing mode configurations, and event handlers from the abstract base class Input.

The Numberbox class handles formatted number entries within the fgta5js framework. It formats input numbers with comma group separators on blur while allowing raw numeric editing on focus. It handles value bounds (min/max), step values, custom floating-point precision, and read-only toggling.

Interactive Playground

Try interacting with the live component below and watch how the internal states change dynamically.

Live Preview

Component State

.value 0

.InEditMode true

.getLastValue() 0

.isChanged() false

HTML Markup

Define numeric inputs in your markup. Set attributes like precision, min, and max to control behavior.

<form id="myform" locked="true">
  <!-- Numeric Input with 2 Decimal Digits -->
  <div class="demo-input-field" field="obj_score">
    <label for="obj_score">Score</label>
    <input id="obj_score" fgta5-component="Numberbox" precision="2" min="0" max="100" required>
  </div>
</form>

Initialize and render the form in JavaScript:

const form = new $fgta5.Form('myform');
form.render()

Properties

Property	Type	Description
`value`	`Number`	Get or set the current numeric value. Always returns a JavaScript number representation.
`InEditMode`	`Boolean`	Gets the current edit/readonly state of the component (Read-only). Set using `setEditingMode()`.
`disabled`	`Boolean`	Gets or sets the component disabled state. Blocks input if true.

Methods

Method	Arguments	Description
`constructor(id)`	`(id: String)`	Creates and binds a new `Numberbox` instance to the HTML element using the specified ID.
`setEditingMode(ineditmode)`	`(ineditmode: Boolean)`	Toggles editing mode. Setting to `false` locks input, sets readonly, and clears errors.
`suspend(doSuspend, keepState)`	`(doSuspend: Boolean, keepState: Boolean)`	Suspends the component behavior and locks/disables input elements depending on arguments.
`isSuspended()`	`()`	Returns true if the component is currently suspended.
`newData(initialvalue)`	`(initialvalue: Number)`	Resets value and sets new baseline value (defaults to `0` if not provided).
`getLastValue()`	`()`	Returns the last saved number value.
`isChanged()`	`()`	Checks if the current `value` differs from the last saved state value.
`focus()`	`()`	Programmatically shifts focus onto the numeric display field.

HTML Attributes

Attribute	Values	Description
`precision`	`Number`	Specifies the number of decimal digits displayed and saved (e.g. `2` for currency).
`digitgrouping`	`"true" \| "false"`	Specifies whether thousands separators (commas) should be formatted. Default is `"true"`.
`min`	`Number`	Minimum numeric boundary value enforced during validation on blur.
`max`	`Number`	Maximum numeric boundary value enforced during validation on blur.
`required`	N/A	Marks the field as required.
`data-tabindex`	`Number`	Sets the native tabindex on the final display element.