Textbox Component — fgta5js Documentation

Overview

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

The Textbox class provides standard single-line and multi-line text input capabilities within the fgta5js framework. By wrapping standard HTML input elements, it offers built-in state checking, validation styles, unified event dispatches, and responsive editing modes.

Interactive Playground

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

Live Preview

Component State

.value ""

.InEditMode true

.getLastValue() ""

.isChanged() false

HTML Markup

Define standard text inputs using EJS or pure HTML. The system uses attributes like fgta5-component="Textbox" for binding.

<form id="myform" locked="true">
  <!-- Single Line Input -->
  <div class="demo-input-field" field="obj_name">
    <label for="obj_name">Username</label>
    <input id="obj_name" fgta5-component="Textbox" placeholder="Username" required>
  </div>

  <!-- Multi-line Text Area -->
  <div class="demo-input-field" field="obj_notes">
    <label for="obj_notes">Notes</label>
    <input id="obj_notes" fgta5-component="Textbox" multiline="true" placeholder="Notes">
  </div>
</form>

Initialize and render the form in JavaScript:

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

Properties

Property	Type	Description
`value`	`String`	Get or set the current input text. Sanitizes automatically based on `character-case` settings.
`InEditMode`	`Boolean`	Gets the current edit/readonly state of the component (Read-only). To modify, use `setEditingMode()`.

Methods

Method	Arguments	Description
`constructor(id)`	`(id: String)`	Creates and binds a new `Textbox` instance to the HTML element using the specified ID.
`setEditingMode(ineditmode)`	`(ineditmode: Boolean)`	Toggles editing mode. Setting to `false` locks the component as read-only and clears errors.
`newData(initialvalue)`	`(initialvalue: String)`	Initializes the input with a new value and resets change detection states.
`getLastValue()`	`()`	Returns the last committed/saved value string.
`isChanged()`	`()`	Checks if the current `value` differs from the last saved state value.
`focus()`	`()`	Programmatically shifts focus onto the text field element.

HTML Attributes

Attribute	Values	Description
`multiline`	`"true"`	Transforms the input element internally into a `<textarea>` element.
`character-case`	`"uppercase" \| "lowercase"`	Automatically enforces the specified case conversion on user input and program settings.
`required`	N/A	Marks the component as required, enabling default empty validations.
`data-tabindex`	`Number`	Sets the native tabindex on the final rendered input component.