Class: TextField

Constructor

new TextField()

Creates an instance of TextField component object.

Classes

TextField

Members

(readonly) selectedText :string

Gets selected text. I no text is selected, and empty string is returned.

Type:

string

Methods

deleteSelection() → {TextField}

Deletes selected text. If no text is selected, nothing is deleted.

Returns:

Returns this TextField component for method chaining.

Type:: TextField

filter(regex_filteropt) → {string|TextField}

Sets or gets a text input filter regular expression that filters the input of text to allow only text that matches filter.

The filter must match the entire text of the field, not just a single character.

NOTE: When setting text to TextField that doesn't match this filter, the text will not be set and previous text will remain in the text field.

Parameters:

Name	Type	Attributes	Description
`regex_filter`	string	<optional>	Regular expression filter string. Set to empty string to remove existing filter.

Returns:

When setting a filter, this TextField component is returned. When called without arguments, returns the current filter string.

Type:: string | TextField

Examples

// Allow only digits
textfield.filter("^\\d*$");

// Allow U.S. phone numbers in format 123-456-7890
textfield.filter("^\\d{3}-\\d{3}-\\d{4}$");

// Allow only characters valid for email address
textfield.filter([A-Za-z0-9\.\_\%\+\-

// Allow basic email addresses (accepts partial email)
textfield.filter("^[a-zA-Z0-9.\\_\\%\\+\\-]+(@([a-zA-Z0-9-]*(\\.[a-zA-Z0-9-]*)*(\\.[a-zA-Z]*)?))?$");

// Allow basic email addresses (email cannot be typed one character at at time, only pasted in full)
textfield.filter("^[A-Za-z0-9\\.\\_\\%\\+\\-]+@[A-Za-z0-9.-]+\\.[A-Za-z]{2,}$");

// Remove filter
textfield.filter("");

mask(maskopt, placeholderopt) → {Object|TextField}

Sets or gets a text mask formatter with a specified mask string and a placeholder character.

A mask string defines the allowed characters at each position. Each special character in the mask has a meaning:

# — A digit (0–9).
U — An uppercase letter (A–Z).
L — A lowercase letter (a–z).
A — Any letter (A–Z or a–z).
? — Any letter (case-insensitive).
* — Any character (letter or digit).
H — A hexadecimal character (0–9, A–F, a–f).
. , , , : , - , / — These are treated as literal characters and appear in the formatted text.
' (single quote) — Escape character. Place before a literal mask character if you don’t want it treated specially. Example: "'#'###" means literal # followed by three digits.

Example masks:

"###-##-####" → U.S. Social Security number (digits with dashes).
"(###) ###-####" → U.S. phone number.
"UUU-####" → Three uppercase letters, dash, and four digits.

Parameters:

Name	Type	Attributes	Default	Description
`mask`	string	<optional>		Text mask string. Set to empty string or `null` to clear the mask.
`placeholder`	string	<optional>	"_"	A character to use for empty characters in the mask. Default is "_" character.

Returns:

When setting a mask, returns this TextField component for chaining. When called without arguments, returns the current mask information object.

Type:: Object | TextField

Examples

// U.S. Phone number mask
textfield.mask("(###) ###-####", "_");

// Date input (MM/DD/YYYY)
textfield.mask("##/##/####", "_");

// Time input (HH:MM)
textfield.mask("##:##", "_");

// Product code input
textfield.mask("AAAA-####", "_");

// Get current mask settings
const info = textfield.mask();
console.log(info.mask, info.placeholder);

selectAll() → {TextField}

Selects all text.

Returns:

Returns this TextField component for method chaining.

Type:: TextField

selection(startopt, endopt) → {Object}

Selects text at specified position or gets current selection as object.

Parameters:

Name	Type	Attributes	Description
`start`	number	<optional>	Beginning position of text to be selected.
`end`	number	<optional>	End position of text to be selected. If `start` argument is provided bu `end` is omitted, end will be start + 1 o select one character.

Returns:

If arguments are provided, this TextField component is returned; otherwise current selection is returned as object {start:number, end:number, text:string}.

Type:: Object

Examples

// Setting selection
textfield.selection(10, 30);

// getting selection
let s = textfield.selection();
console.log(`Selected from ${s.start} to ${s.end}: ${s.text}`);