Class: Input

new Input(parent, propsopt)

Input field This class focuses on the specific properties of the Input component. Since it inherits from Accessor_A, all basic properties (e.g., height, width) are available but documented in the Accessor_A part.

Parameters:

Name	Type	Attributes	Description
`parent`	HTMLElement		DOM element in which this component is to be inserted
`props`	TComponents.InputProps	<optional>	Input field properties (InputProps)

Source: as-input.js, line 54

Example

const inputField = new TComponents.Input(document.body, {
  position: 'absolute',
  zIndex: 1000,
  text: 'Input field'
});

// Render the component.
inputField.render();

Extends

TComponents.Component_A

Members

inputVar :object

Sets inputVar property. This property is used to set the inputVar configuration. If the configuration is invalid or doesn't meet the expected conditions, an exception will be triggered in the input component. Note: Invalid inputVar configurations may cause the input component to throw an error.

Type:

object

Source: as-input.js, line 663

Example

// prepare a boolean variable 'b1' in module 'Module1' of task 'T_ROB1'
const inputField = new TComponents.Input(document.body, {
  position: 'absolute',
  zIndex: 1000,
  text: 'Input field'
});

// Render the component.
inputField.render();

// Update the inputVar configuration
inputField.text = '@@bool|T_ROB1.Module1|b1@@'
inputField.inputVar = {
 type: TComponents.Component_A.INPUTVAR_TYPE.BOOL,
 func: TComponents.Component_A.INPUTVAR_FUNC.SYNC,
 value: '@@bool|T_ROB1.Module1|b1@@'
};

keyboardHelperDesc :string

Descriptive label string that will be visible below the editor field on the keyboard when the input field is being edited. The value that the use is editing should be described and input limitations are preferably provided.

Type:

string

Source: as-input.js, line 494

Example

const inputField = new TComponents.Input(document.body, {
  position: 'absolute',
  zIndex: 1000,
  text: 'Input field'
});

// Render the component.
inputField.render();

inputField.keyboardHelperDesc = 'keyboard Helper Desc';

onChange :function

Sets the onChange event handler for the input component. The handler can either be a string representing a function to be executed or a function itself.

If you are using an arrow function, like ()=>{}, the this property of the scope may not refer to the input object.
If you are using string assignment to define code execution, the string should contain only the body of the code (executable statements), not a complete function declaration. Therefore, including function keywords like function or async function is incorrect.

Correct (Statements Only): xx.onChange = "console.log('Action done.');"
Incorrect (Function Declaration): xx.onChange = "function() { console.log('Action done.'); }"

Type:

function

Source: as-input.js, line 624

Examples

// Example 1: Using a string as the handler:
inputField.onChange = "console.log(this.text);"

// Example 2: Using a function as the handler:
inputField.onChange = function () {
  console.log(this.text);
};

// Example 3: Using an arrow function as the handler:
// Note that the `this` context will not refer to the inputField object
inputField.onChange = () => {
  console.log(inputField.text);
};

readOnly :boolean

Sets the read-only state of the Input component

Type:

boolean

Source: as-input.js, line 590

Example

const inputField = new TComponents.Input(document.body, {
  position: 'absolute',
  zIndex: 1000,
  text: 'Input field'
});

// Render the component.
inputField.render();

inputField.readOnly = true;

regex :any

Regular expression object Standard JavaScript regular expression object used for validating and allowing the input. Default value is null. It can be used in combination with the validator argument. Note that if the text of the input field is set programmatically using the text attribute, this input limitation does not apply.

Type:

Source: as-input.js, line 525

Example

const inputField = new TComponents.Input(document.body, {
  position: 'absolute',
  zIndex: 1000,
  text: 'Input field'
});

// Render the component.
inputField.render();

// Only allow input of floating-point numbers or integers.
inputField.regex = /^-?[0-9]+(\.[0-9]+)?$/;

text :string

This attribute represents the text content of the input field. It can be read to get the current content. Setting this attribute will programmatically will trigger the onchange callback function synchronize the data in controller.

Type:

string

Source: as-input.js, line 324

Example

const inputField = new TComponents.Input(document.body, {
  position: 'absolute',
  zIndex: 1000,
  text: 'Input field'
});

// Render the component.
inputField.render();

inputField.text = 'New input text';

textX :string

This attribute represents the text content of the input field. The update is applied silently without triggering change events and synchronization with the controller,

Type:

string

Source: as-input.js, line 401

Example

const inputField = new TComponents.Input(document.body, {
  position: 'absolute',
  zIndex: 1000,
  text: 'Input field'
});

// Render the component.
inputField.render();

inputField.textX = 'New input text';

useBorder :boolean

Sets the border usage state.

Type:

boolean

Source: as-input.js, line 562

Example

const inputField = new TComponents.Input(document.body, {
  position: 'absolute',
  zIndex: 1000,
  text: 'Input field'
});

// Render the component.
inputField.render();

inputField.useBorder = false;

validator :function

Sets a callback function to validate the input value. This function accepts the current input value (a string) and returns a boolean (true if the input is valid, false if it is invalid). The validation function will be triggered whenever the user types in the input field. Note that if the input value is programmatically set (e.g., via the text attribute), this validation will not be applied.

Type:

function

Source: as-input.js, line 283

Example

const inputField = new TComponents.Input(document.body, {
  position: 'absolute',
  zIndex: 1000,
  text: 'Input field'
});

// Render the component.
inputField.render();

inputField.validator = function () {
  // customize your validator logic here
  return true;
};

value :string

Sets the value of the input field. This operation is asynchronous and ensures the input field's data is synchronized before triggering the 'change' event.

Type:

string

Source: as-input.js, line 431

Example

const inputField = new TComponents.Input(document.body, {
  position: 'absolute',
  zIndex: 1000,
  text: 'Input field'
});

// Render the component.
inputField.render();

inputField.value = 'New input value';

valueX :string

Sets the value of the input field silently without triggering the 'change' event and without synchronizing with the controller. This behaves similarly to TComponents.Input#textX.

Type:

string

Source: as-input.js, line 464

Example

const inputField = new TComponents.Input(document.body, {
  position: 'absolute',
  zIndex: 1000,
  text: 'Input field'
});

// Render the component.
inputField.render();

// Update value silently (no change event triggered)
inputField.valueX = 'Silent value';

Methods

(protected) afterRenderOnce() → {void}

there are something need to do after render once

Overrides: TComponents.Component_A#afterRenderOnce
Source: as-input.js, line 163

Returns:

Type:: void

(protected) defaultProps() → {TComponents.InputProps}

Returns the default values of class properties (excluding parent properties).

Overrides: TComponents.Component_A#defaultProps
Source: as-input.js, line 93

Returns:

Type:: TComponents.InputProps

markup() → {string}

Returns the HTML markup for the component.

Overrides: TComponents.Component_A#markup
Source: as-input.js, line 238

Returns:

The HTML markup for the component.

Type:: string

(async) onInit() → {Promise.<void>}

Initializes the component and sets up click event handling.

Overrides: TComponents.Component_A#onInit
Source: as-input.js, line 154

Returns:

Type:: Promise.<void>

onRender() → {void}

Renders the component on the screen and applies the necessary styles and event listeners.

Overrides: TComponents.Component_A#onRender
Source: as-input.js, line 176

Throws:

Throws an error if rendering fails.
Type Error

Returns:

Type:: void

setText(text)

This attribute represents the text content of the input field. It can be read to get the current content. Setting this attribute will programmatically will not trigger the onchange callback function but synchronize the data in controller.

Parameters:

Name	Type	Description
`text`	string

Source: as-input.js, line 368

Example

const inputField = new TComponents.Input(document.body, {
  position: 'absolute',
  zIndex: 1000,
  text: 'Input field'
});

// Render the component.
inputField.render();

inputField.setText('New input text');

(static) loadCssClassFromString(css) → {void}

Add css properties to the component

Parameters:

Name	Type	Description
`css`	string	The css string to be loaded into style tag

Source: as-input.js, line 696

Returns:

Type:: void

Example

TComponents.Input.loadCssClassFromString(`
  .tc-input {
    background-color: 'red';
  }
`);